@import './../../../../sources/styles/include.scss';

$component: 'vk';
$template: 'template-2';
$fragment: 'fragment';
$items: #{$fragment}-items;
$item: #{$fragment}-item;
$duration-base: 0.4s;
$color-neutral-semi-bright: #e8e8e8;
$color-neutral-semi-dark: #808080;
$color-neutral-dark: #1b1e25;
$shadow-dark: 1px 7px 28px -3px rgba(27, 30, 37, 0.08);


.widget.c-#{$component}.c-#{$component}-#{$template} {
  .fragment-all-mobile {
    display: none;
    padding: 6px 7px;
  }

  .#{$fragment}-all {
    font-size: 0;
    
    a {
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 0.1em;
      font-weight: 500;
      text-decoration: none;
    }
  }

  .#{$fragment}-title {
    margin-bottom: 16px;
  }
  .#{$fragment}-title-text {
    color: #1B1E25;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
  }

  .#{$fragment}-all-desktop {
    padding-right: 8px;
    color: $color-neutral-semi-dark;
    @include transition($duration-base, color);
  }
  .#{$fragment}-all-mobile {
    @include size(16px, 16px);
    stroke: $color-neutral-semi-dark;
    font-size: 0;
  }

  .#{$fragment}-description {
    color: $color-neutral-semi-dark;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 39px;
  }

  .#{$item}-content {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-style: solid;
    border-width: 1px;
    @include border-radius(2px);
    @include transition($duration-base, (border-color, box-shadow));
  }

  .border-sb {
    border-color: $color-neutral-semi-bright;
  }

  .border-transparent-hover:hover {
    border-color: transparent;
  }

  .#{$item}-picture {
    display: block;
    font-size: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &[data-lazyload-use='true'] {
        min-height: 100%;
        min-width: 100%;
        background-color: $color-neutral-semi-bright;
      }
    }
  }
  .#{$item}-text {
    margin: 24px 24px 0;
    overflow: hidden;
    max-height: 7em;
  }
  .#{$item}-title-text {
    padding-left: 11px;
  }
  a.#{$item}-title {
    padding: 20px 24px 30px;
    text-decoration: none;
    color: $color-neutral-semi-dark;
    @include transition($duration-base, all);
    svg path {
      @include transition($duration-base, all);
    }
  }

  .#{$item}-title-icon svg {
    width: 16px;
    height: 16px;
    fill: $color-neutral-semi-dark;
    @include transition($duration-base, fill);
  }

  .#{$item}-description {
    color: $color-neutral-dark;
  }

  .#{$item}-title-svg-container {
    display: block;
    overflow: hidden;
    width: 50px;
    font-size: 0;
    text-align: right;

    svg {
      stroke: $color-neutral-semi-dark;
      @include transition($duration-base, stroke);
    }
  }
  .#{$item}-title-svg-line {
    position: absolute;
    top: calc(50% - 1px);
    left: 26px;
    right: 7px;
    height: 1px;
    background-color: $color-neutral-dark;
    @include transition($duration-base, (background-color, left));
  }

  .fragment {
    .fragment-description {
      font-size: 14px;
      color: $color-neutral-semi-dark;
      line-height: 1.6;
    }

    .fragment-header + .fragment-content {
      margin-top: 32px;
    }

    .fragment-title {
      font-size: 24px;
      font-weight: 400;
      line-height: 1.2;

      +.fragment-description {
        margin-top: 16px;
      }
    }
  }

  @media all and (min-width: 769px) {
    .#{$item}-content {
      &:hover {
        -webkit-box-shadow: $shadow-dark;
        -moz-box-shadow: $shadow-dark;
        box-shadow: $shadow-dark;
      }
    }
  }

  @include breakpoint-768() {
    .#{$fragment}-all-mobile {
      @include size(32px, 32px);
    }
    .#{$items} {
      overflow-x: scroll;
      scrollbar-color: $color-neutral-semi-dark $color-neutral-semi-bright;

      &::-webkit-scrollbar {
        height: 24px;
      }
      &::-webkit-scrollbar-track {
        margin-left: 16px;
        margin-right: 16px;
        border-bottom: 2px solid $color-neutral-semi-bright;
      }
      &::-webkit-scrollbar-thumb {
        border-bottom: 2px solid $color-neutral-semi-dark;
      }
    }
    .#{$item} {
      width: 40%;
    }
  }

  @media screen and (max-width: 550px) {
    .#{$item} {
      width: 70%;
    }
  }

  @include breakpoint-425() {
    .#{$item} {
      width: 92%;
    }
  }
  @media screen and (max-width: 500px) {
    .fragment-all-mobile {
      display: block;
    }
    .#{$fragment}-all-desktop {
      display: none;
    }
  }
  .ui-ratio-1x1,
  .ui-ratio-4x3,
  .ui-ratio-16x9,
  .ui-ratio-21x9 {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .ui-ratio-1x1 {
    aspect-ratio: 1/1;
  }

  .ui-ratio-4x3 {
    aspect-ratio: 4/3;
  }

  .ui-ratio-16x9 {
    aspect-ratio: 16/9;
  }

  .ui-ratio-21x9 {
    aspect-ratio: 21/9;
  }
}