ihk24/gfi-ihk-2024/stories/components/participation-list-item/participation-list-item.scss

@use '../../_global/styles/mixins' as *;
@use '../../_global/styles/vars' as *;

.participation-list {
  margin: calc(20px + 2%) 0;
}

.participation-list-item +.participation-list-item {
  padding-top: 30px;

  @media(max-width: 999px) {
    padding-top: 20px;
  }
  @media(max-width: 767px) {
    padding-top: 15px;
  }
}

.participation-list-item {
  .tile {
    position: relative;
    padding: 20px 20px 12px;
    border-radius: var(--border-radius-md);
    background-color: var(--color-background);

    @media(min-width: 768px) {
      display: flex;
      align-items: flex-end;
      flex-wrap: nowrap;
      flex-direction: row;
    }

    &::before,
    &::after {
      display: none;
    }

    .buttons {
      @media(max-width: 767px) {
        padding-top: 0;
      }

      @media(min-width: 768px) {
        display: block;
        text-align: right;
        min-width: 240px;
        padding-left: 40px;

        .btn {
          margin: 8px 0 4px;
        }
      }
    }

    .like-h4 {
      margin-top: 0.2em;
      margin-bottom: 0.5em;
    }

    .text-box {
      padding-top: 0;
    }
  }

  .progress {
    display: inline-block;
    vertical-align: top;
    margin: 0;

    @media(max-width: 370px) {
      max-width: calc(100% - 150px);
    }

    + .kicker {
      display: inline-block;
      vertical-align: top;
      margin: 0 0 0 10px;
      line-height: 1;
    }
  }
}