.section-catalogue {
  .page-main {
    display: flex;
  }
}

// Views grid
.view-opigno-training-catalog {
  padding-bottom: rem(50);
  position: relative;

  .view-style {
    display: flex;
    margin-bottom: rem(13);
    min-height: rem(40);
    position: relative;
    z-index: 10;

    @include media-breakpoint-down(md) {
      display: none;
    }

    > .dropdown-menu {
      min-width: rem(140);
    }

    ul {
      align-items: flex-end;
      list-style: none;
      margin: 0 0 0 20px;
      padding: 0;
    }

    .btn.line,
    .btn.block {
      background: none;
      font-size: rem(24);
      min-height: 0;
      min-width: 0;
      padding: 0;

      &:hover {
        box-shadow: none;
        transform: none;
      }

      &.block {
        display: none;
      }
    }
  }

  // Block view
  .views-infinite-scroll-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 -6px;
  }

  .not-take-link-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  .views-row {
    border-radius: rem(10);
    box-shadow: 0 0 6px rgba($clr-black, .3);
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(33.333% - 12px);
    max-width: calc(33.333% - 12px);
    margin: 0 rem(6) rem(18);
    overflow: hidden;
    position: relative;

    @include media-breakpoint-down(lg) {
      flex: 0 0 calc(50% - 12px);
      max-width: calc(50% - 12px);
      margin-bottom: rem(40);
    }

    @media screen and (max-width: 480px) {
      flex: 0 0 calc(100% - 12px);
      max-width: calc(100% - 12px);
    }

    &:hover {
      @include media-breakpoint-up(lg) {
        .top-wrapper {
          transform: translateY(-100%);

          .views-field-label {
            opacity: 0;
          }

          .fi {
            color: $clr-navy;
          }
        }

        .text-wrapper {
          opacity: 1;
        }
      }
    }
  }

  .fields-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .top-wrapper {
    flex: 1 0 auto;
    position: relative;
    transition: transform .3s ease-out;
    z-index: 3;

    @include media-breakpoint-down(md) {
      flex: 0 0 auto;
    }

    .views-field-label {
      padding: rem(10) rem(20) rem(20);
      transition: opacity .1s ease-out;

      @include media-breakpoint-down(md) {
        padding: 0;
        position: static;
      }

      h2 {
        margin: 0;

        @include media-breakpoint-down(md) {
          display: none;
        }
      }

      .not-take-link-wrapper {
        @include media-breakpoint-down(md) {
          display: none;
        }
      }

      .fi {
        @include media-breakpoint-down(md) {
          background: rgba($clr-black, .1);
          border-radius: 50%;
          color: $clr-white;
          display: block;
          height: rem(38);
          text-align: center;
          width: rem(38);
          z-index: 3;

          &:before {
            line-height: rem(38);
          }
        }
      }
    }

    .dropdown {
      @include media-breakpoint-down(md) {
        position: absolute;
        right: rem(4);
        top: rem(4);
      }
    }
  }

  .views-field-field-learning-path-media-image {
    border-radius: rem(10);
    overflow: hidden;

    img {
      width: 100%;
    }
  }

  .body-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: auto;
    min-height: rem(87);
    padding: 0 rem(20) rem(10);

    @include media-breakpoint-down(md) {
      flex: 1 0 auto;
      margin-top: 0;
      padding: rem(10) rem(10) rem(20);
    }

    .views-field-label {
      @include media-breakpoint-down(md) {
        position: static;
      }

      h2 {
        @include media-breakpoint-down(md) {
          font-size: rem(14);
        }
      }
    }

    p {
      margin-top: 0;

      @include media-breakpoint-down(md) {
        margin-bottom: 0;
      }
    }

    a {
      position: relative;
      z-index: 1;
    }
  }

  .text-wrapper {
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    opacity: 0;
    padding: rem(20) rem(20) 0 rem(20);
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity .3s ease;
    width: 100%;

    @include media-breakpoint-down(md) {
      display: flex;
      flex-wrap: wrap;
      height: auto;
      margin-bottom: auto;
      opacity: 1;
      position: static;
      padding: 0;
    }

    .dropdown {
      @include media-breakpoint-down(md) {
        display: none;
      }
    }
  }

  .views-field-label {
    display: flex;
    position: relative;

    .dropdown {
      z-index: 1;
    }

    .fi {
      font-size: rem(27);
    }

    h2 {
      font-weight: $font-weight-extrabold;
      margin-bottom: rem(20);
      padding-right: rem(25);
      width: 100%;

      @include media-breakpoint-down(md) {
        margin-bottom: rem(10);
      }
    }
  }

  .views-field-field-learning-path-description {
    margin-bottom: rem(25);

    @include media-breakpoint-down(md) {
      margin-bottom: rem(10);
    }

    p {
      margin: 0;
    }
  }

  .views-field-field-learning-path-spent-time {
    font-weight: $font-weight-semibold;
    margin-bottom: rem(20);

    @include media-breakpoint-down(md) {
      order: 1;
    }

    p {
      margin: 0;
    }
  }

  .views-field-field-learning-path-category {
    margin-bottom: rem(20);
    p {
      margin-bottom: 0;
    }

    @include media-breakpoint-down(md) {
      margin-right: rem(20);
    }
  }

  .progress-wrapper {
    .dropdown,
    .status {
      display: none;
    }

    .learning-path-progress {
      @include media-breakpoint-down(md) {
        align-items: center;
        flex-direction: row !important;
        margin-bottom: rem(10);

        .progress-bar {
          border-radius: rem(5);
          height: rem(5);
          margin-right: rem(9);
          overflow: hidden;
        }

        .progress-value {
          margin-bottom: 0;
        }
      }
    }
  }

  .circle-progress {
    display: none;
  }

  .views-field-opigno-lp-take-link {
    display: flex;
    justify-content: center;
    position: relative;

    @include media-breakpoint-down(md) {
      justify-content: flex-end;
    }

    .top-text {
      position: absolute;
      bottom: rem(50);
      right: 0;

      @include media-breakpoint-down(md) {
        position: static;
      }
    }

    .price {
      font-size: rem(24);
      font-weight: $font-weight-bold;
      line-height: 1.2;

      @include media-breakpoint-down(md) {
        align-self: center;
        font-size: rem(16);
        margin-right: rem(20);
      }
    }

    .fi {
      align-items: center;
      background: $clr-gray;
      border-radius: 50%;
      color: $clr-white;
      display: flex;
      font-size: rem(24);
      justify-content: center;
      height: rem(37);
      position: absolute;
      left: 0;
      bottom: 0;
      width: rem(37);
    }
  }

  // Line view
  &.style-line {
    margin: 0;

    .view-style {
      .btn {
        &.block {
          display: block;
        }

        &.line {
          display: none;
        }
      }
    }

    .views-infinite-scroll-content-wrapper {
      margin: 0;
    }

    @include media-breakpoint-up(lg) {
      .views-row {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 0 0 rem(18);

        &:hover {
          .top-wrapper {
            transform: none;
          }
        }
      }

      .fields-content {
        flex-direction: row;
      }

      .top-wrapper {
        flex: 0 0 rem(206);
        max-width: rem(206);
        position: static;
        z-index: 0;

        .views-field-label {
          display: none;
        }
      }

      .body-wrapper {
        flex: 1 1 auto;
        flex-direction: row;
        margin: 0;
        padding: rem(18) rem(20) rem(16) rem(16);
      }

      .text-wrapper {
        display: block;
        flex: 0 0 64%;
        max-width: 64%;
        opacity: 1;
        padding: 0;
        position: static;

        > .status {
          display: none;
        }
      }

      .views-field-label {
        h2 {
          color: $clr-desktop-headings;
          margin-bottom: rem(15);
        }

        .fi {
          display: none;
        }
      }

      .views-field-field-learning-path-description {
        margin-bottom: rem(20);
      }

      .views-field-field-learning-path-category {
        margin-bottom: 0;
      }

      .progress-wrapper {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-left: auto;
        position: relative;

        .dropdown {
          display: block;
          position: absolute;
          right: 0;
          top: rem(-5);
          z-index: 2;

          .fi {
            font-size: rem(27);
          }
        }

        .status {
          display: block;
          margin-bottom: rem(10);
          text-align: center;

          &__icon {
            margin: auto;
          }
        }
      }

      .circle-progress {
        display: block;
        margin-bottom: rem(24);
      }

      .views-field-opigno-lp-progress {
        display: none;
      }
    }

    .views-field-opigno-lp-take-link {
      .fi {
        @include media-breakpoint-up(lg) {
          left: 50%;
          bottom: calc(100% + 20px);
          transform: translate(-50%);
        }
      }
    }
  }
}

// Training card
.training-card {
  height: 100%;

  .tc-body {
    padding: rem(10) rem($grid-gutter-width / 2) rem(15);
    background-color: $clr-theme-secondary;
    margin-bottom: rem(15);
  }

  .tc-footer {
    padding: 0 rem($grid-gutter-width / 2);
  }

  .learning-path-progress {
    .progress-value {
      color: $clr-theme-secondary;
      font-weight: $font-weight-bold;
    }

    .progress-progress {
      background: $clr-theme-success;
    }
  }

  .views-field {
    &-field-learning-path-media-image {
      img {
        width: 100%;
      }
    }

    &-field-learning-path-category {
     font-size: rem($font-size-sm);
      color: $clr-theme-primary;
      margin-bottom: rem(6);
    }

    &-label {
      text-transform: uppercase;
      margin-bottom: rem(16);

      h3 {
       font-size: rem($font-size-base);
        margin: 0;
      }
    }

    &-field-learning-path-description {
      margin-bottom: rem(16);
      word-break: break-word;
    }

    &-opigno-lp-take-link {
      .btn {
        display: block;
      }
    }
  }
}

// Filter block
#catalog-filter-parent {
  .catalog-filter {
    @include media-breakpoint-down(md) {
      background: $clr-white;
      display: none;
      height: 100%;
      max-height: calc(100vh - 80px);
      overflow-y: auto;
      padding: 0 3px rem(140);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 5;

      .toolbar-vertical & {
        max-height: calc(100vh - 115px);
      }

      .fieldgroup {
        margin-bottom: rem(20);
      }

      .form-submit {
        margin: 0 auto;
        max-width: rem(156);
      }
    }
  }
}



.block.block-views-exposed-filter-blockopigno-training-catalog-training-catalogue {
  padding: 0;
  background-color: transparent;
}

.block-views-exposed-filter-blockopigno-training-catalog-training-catalogue {
  $training-icons: (
    '[id*="group-membership"]': 'eye',
    '[id*="learning-path-category"]': 'categories',
    '[id*="sort"]': 'clock',
  );

  .fieldset-legend {
    @include icon-opigno-base(before);
    position: relative;
    padding-left: rem(50);

    &:before {
      position: absolute;
      left: 0;
      top: rem(-8);
      font-size: rem(34);
    }
  }

  @each $selector, $icon in $training-icons {
    #{$selector} .fieldset-legend {
      &:before {
        content: map-get($icomoon, $icon);
      }
    }
  }
}

