@import '../helpers/helpers';

.info {
  background-color: $gray-light;

  &__block.info__block {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: $white;
    border: 1px solid $gray;
    border-radius: 3px;
    padding-top: 0;
    padding-bottom: 0;

    &:last-of-type {
      margin-bottom: 0;
    }

    &:first-of-type {
      margin-top: 0;
    }
  }

  &__header {
    padding-left: 0;
    font-size: 1.5rem;
    padding-top: 10px;
    padding-bottom: 10px;

    &:hover {
      &::before {
        color: $gray-dark;
      }
    }

    &.info__header::before {
      font-size: 3.57rem;
      font-weight: 400;
      line-height: 19px;

      .accordion_collapsed & {
        font-size: 1.77rem;
        font-weight: 500;
      }
    }
  }

  &__block.accordion_collapsed {
    &:hover {
      border: 1px solid $gray-dark;

      .info__header::before {
        color: $gray-dark;
      }
    }
  }

  &__content {
    padding-top: 0;
    padding-bottom: 20px;

    & .info-content {
      padding-left: 0;

      & .info__lists-not-bullets {
        list-style-type: none;

        & {
          padding-left: 0;
        }

      }

      & li {
        padding-left: 0;
      }
    }

    .ti-floor__title-main {
      display: none;
    }

    .tile-measurement {
      .ti-floor__title {
        font-weight: 700;
        font-size: 1rem;

        &-main {
          display: block;
        }
      }

      .ti-floor__measurement {
        .ti-floor__title {
          padding: 0;
        }
      }
    }
  }

  .info__features {
    display: flex;
    justify-content: flex-start;

    &-header {
      font-weight: 700;
      margin-top: 10px;

      &-data {
        margin-bottom: 10px;
      }
    }

    &-list-data.info__features-list-data {

      & .info__lists-bullets {
        max-width: 100%;
      }
    }

    & .info__lists-bullets {
      list-style-position: outside;
      margin-left: 15px;

      & li {
        line-height: 1.5rem;
        padding-bottom: 10px;

        & span {
          font-size: .875rem;
        }

        & .data-sheets {
          font-size: 1rem;
          font-weight: 500;
        }
      }

      &:first-of-type {
        padding-left: 0;
      }

    }
  }

  &__lists {
    display: flex;
    flex-direction: row;
    justify-content: left;
    line-height: 1.5rem;

    & > * {
      width: 33%;
      padding-right: 50px;
    }
  }

  &__stars {
    margin-left: 15px;

    &-average {
      vertical-align: middle;
      font-size: .875rem;
    }
  }

  &__review-star.info__review-star {
    vertical-align: middle;
    padding-bottom: 3px;
    margin-left: 10px;
  }

  .tile-calculation {
    .ti__step1 {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }
}

.pr-rd-image-container figcaption {
  display: none;
}

@include media-breakpoint-up(md) {
  .info {
    .info__features {
      & .info__lists-bullets {
        max-width: 50%;
        padding-inline-start: 40px;
      }
    }
  }
}

@include media-breakpoint-down(md) {
  .info {
    &__block.info__block {
      padding-left: 15px;
      padding-right: 15px;
    }

    &__content {
      .tile-measurement {
        .ti-floor__title {
          &-main {
            padding-left: 15px;
            padding-top: 15px;
          }
        }

        .ti-floor__measurement {
          .ti-floor__title {
            margin-bottom: 10px;
          }
        }
      }
    }

    .info__features {
      &-header {
        margin-bottom: 15px;
      }
    }

    &__lists {
      padding-right: 0;
    }
  }

  .container-info {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

@include media-breakpoint-down(sm) {
  .info {
    &__header {
      font-size: 1.125rem;
    }

    &__content {
      & .info-content {
        & .info__lists-not-bullets {
          padding-left: 0;
        }
      }
    }

    .info__features {
      &-column {
        flex-direction: column;
      }

      &-header {
        margin-top: 15px;
      }

      & .info__lists-bullets {
        padding-left: 0;

        &:first-child {
          margin-bottom: 0;
        }
      }
    }

    &__lists {
      flex-direction: column;
      padding-right: 0;

      & > * {
        width: 100%;
        padding-right: 0;
      }
    }
  }
}