lila/ui/bits/css/practice/_app.scss

.practice-app {
  section {
    > h2 {
      @extend %roboto, %page-text-shadow;

      font-size: 2em;
      letter-spacing: 8px;
      text-transform: uppercase;
      color: #999;
      text-align: center;
    }
  }

  .studies {
    ---min-width: 400px;

    @media (width < $xx-small) {
      ---min-width: calc(100vw - 2em);

      padding: 0 0.5em;
    }

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(---min-width), 1fr));
    gap: 1em;
    margin: 1.5em 0 3em 0;
  }

  .study {
    @extend %box-radius, %flex-center-nowrap;
    @include transition;
    @include backdrop-blur-if-transparent;

    position: relative;
    min-height: 90px;
    color: #fff;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.07);
    font-size: 1.2em;
    border: 1px solid $c-border;
    background: $c-bg-box;
    padding-right: 3em;

    @include if-light {
      color: $c-font;

      icon {
        filter: brightness(0.15);
      }
    }

    @media (width < $xx-small) {
      min-height: fit-content;
      padding: 6px 3em 6px 0;

      p {
        margin-top: 2px;
      }
    }

    icon {
      width: 70px;
      height: 70px;
      margin: 0 1em;
      opacity: 0.6;
      background-repeat: no-repeat;
      background-position: center;
      flex-shrink: 0;

      @media (width < $xx-small) {
        width: 50px;
        height: 64px;
      }
    }

    h3 {
      font-size: 1.5em;
      line-height: 1;
    }

    p {
      margin: 4px 0 0 0;
      line-height: 1.2;
      opacity: 0.8;
    }

    &.ongoing {
      border-color: $m-primary--fade-50;
      background: linear-gradient(0deg, $m-primary--fade-60, $m-primary--fade-80 100px);

      .attention-effect {
        @include animated-border($m-primary--lighten-30, $m-primary--fade-80);
      }

      @include if-light {
        background: linear-gradient(180deg, $m-primary--fade-60, $m-primary--fade-80 100px);

        .attention-effect {
          @include animated-border($m-primary--darken-25, $m-primary--fade-80);
        }
      }
    }

    &.done {
      border-color: $m-secondary--fade-35;
      background: linear-gradient(0deg, $m-secondary--fade-60, $m-secondary--fade-80 100px);

      @include if-light {
        background: linear-gradient(180deg, $m-secondary--fade-60, $m-secondary--fade-80 100px);
      }
    }

    &.future {
      border-color: $m-future--fade-35;
      background: linear-gradient(0deg, $m-future--fade-60, $m-future--fade-80 100px);

      @include if-light {
        background: linear-gradient(180deg, $m-future--fade-60, $m-future--fade-80 100px);
      }
    }

    &.active,
    &:hover {
      transform: scale(1.025);
    }
  }

  .what_next > p {
    @extend %page-text-shadow !optional;

    width: 100%;
    text-align: center;
    margin: 20px 0;
    font-size: 1.2em;
  }
}