@import '../helpers/helpers';

.product-main-info {
  position: relative;

  &__description {
    @include primary-text;
    margin-bottom: 25px;

    @include media-breakpoint-only(md) {
      margin-bottom: 10px;
    }

    @include media-breakpoint-down(sm) {
      margin-top: 20px;
    }
  }

  &__product-code,
  &__view,
  &__advice,
  &__share,
  &__video,
  &__paint-mixing {
    margin-bottom: 20px;
    margin-top: 20px;

    @include media-breakpoint-down(xs) {
      margin-bottom: 15px;
      margin-top: 15px;
    }
  }

  &__video {
    .video-button {
      padding: 7px 8px;
      width: 37px;
      height: 37px;

      svg {
        font-size: 1.428em;
        width: .875em;
      }
    }
  }

  &__product-code {
    font-size: 1.1428em;

    & span {
      @include media-breakpoint-down(xs) {
        font-size: .875rem;
      }
    }
  }

  &__view {
    font-weight: 500;
    font-size: 1rem;
  }

  &__share {
    & a {
      text-decoration: none;
      color: $blue;
      font-size: 1.149em;

      &:hover {
        & span {
          color: $gray-dark;
          text-decoration: $gray-dark underline;
        }
      }
    }

    &:hover {
      & ~ .share-buttons {
        display: block;
      }
    }


    & span {
      padding: 10px;
      text-decoration: $blue underline;
      font-weight: 500;
    }

    & .share-icon {
      font-size: 1.428em;
    }

    & .share-button {
      padding: 5px 8px 3px;
      font-size: 1rem;
      pointer-events: none;
    }
  }

  &__saving-list {
    .save-shop-list,
    .saved-shop-list {
      justify-content: flex-start;
    }
  }

  &__paint-mixing {
    & a {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    & .btn {
      width: 37px;
      height: 37px;
      padding: 0;
      font-size: 1.325rem;
    }
  }

  &__saving-list &:not(.shop-list-modal),
  &__share,
  &__paint-mixing,
  &__video {
    &:focus,
    &:hover {
      .btn-primary {
        @include button-primary-hover-color;
      }
    }

    &:active {
      .btn-primary {
        @include button-primary-active-color;
      }
    }
  }

  &__video,
  &__share,
  &__paint-mixing {
    .btn-primary {
      &:focus {
        @include button-primary-default-color;
      }

      &:hover {
        @include button-primary-hover-color
      }

      &:active {
        @include button-primary-active-color
      }
    }
  }
}

#isite-outer-container {
  a:hover {
    .btn {
      @include button-primary-hover-color;
    }
  }
}

.description-list {
  padding-top: 0;
}

.description-list_main-info {
  line-height: 1.5rem;
  margin-bottom: 10px;
  overflow: hidden; //TODO: need to refactor floats

  dd {
    margin-bottom: 0;
  }
}