// Variables
$primary: #3083ff;
$secondary: #f5f8fa;
$text: #333f66;
// Variables
$blue: #0267c1;
$orange: #ff7300;
$red: #ff0000;
$light-gray: #fafafa;

:root {
  --primary-color: #333f66;
  --secondary-color: #fff;
}

.list {
  list-style: none;

  &--horizontal {
    display: flex;
    align-items: center;

    li:not(:last-child) {
      margin-inline-end: 10px;
    }
  }
}

.flickity-button {
  background: #F6F4FD;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in;
  z-index: 99;
  opacity: 1;

  &::before {
    font-family: "niafam" !important;
    color: #000;
    transition: all 0.2s linear;
    font-size: 12px;
  }

  &:hover {
    background-color: #3083ff;

    &::before {
      color: #fff;
    }
  }

  svg {
    display: none;
  }

  &:disabled {
    opacity: 0 !important;
  }

  &.next {
    left: -15px !important;
    transform: translateX(-100%) translateY(-50%);

    &::before {
      content: "\e916";
    }
  }

  &.previous {
    right: -15px !important;
    transform: translateX(100%) translateY(-50%);

    &::before {
      content: "\e924";
    }
  }

  &:disabled {
    opacity: 1;
  }
}

.ai-title {
  &--double-underlined {
    position: relative;
    padding-bottom: 13px;

    &::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      width: 34px;
      height: 4px;
      border-radius: 5px;
      background: #f77f00;
    }

    &::after {
      content: "";
      position: absolute;
      right: 38px;
      bottom: 0;
      width: 15px;
      height: 4px;
      border-radius: 5px;
      background: #f77f00;
      opacity: 0.5;
    }
  }
}

.fixed-images {
  position: absolute;
  left: 50%;
  top: 50%;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

.cover-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
}

.news-item {
  position: relative;

  &--overlay {
    position: relative;

    .news-item {
      &__kicker {
        padding-bottom: 8px;
        position: relative;
        margin-bottom: 8px;

        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 60px;
          height: 2px;
          background-color: #f77f00;
          border-radius: 4px;
          opacity: .8;
        }
      }

      &__content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        border-radius: 10px;
        overflow: hidden;
        padding: 24px;
        background: linear-gradient(359deg, rgba(0, 0, 0, 0.90) 0.87%, rgba(0, 0, 0, 0.00) 71.34%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;

        &::before {
          content: "";
          background: rgba(0, 0, 0, 0.3);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: all 0.2s linear;
        }
      }

      &__pic {
        &::before {
          content: unset;
        }
      }



      &__title {
        z-index: 5;

        &:hover {
          color: var(--secondary-color);
        }
      }
    }

    &:hover {
      .news-item__content::before {
        opacity: 1;
      }

      .news-item__title {
        color: #fff !important;
      }


      .news-item__pic {
        img {
          transform: translate(-50%, -50%) rotate(-2deg) scale(1.08);
        }
      }
    }

    .cover-link {
      z-index: 9;
    }
  }

  &--vertical {
    display: flex;
    gap: 10px;
    align-items: center;

    .news-item {
      &__play {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 13px;
        top: 13px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        z-index: 10;
        pointer-events: none;

        i {
          position: relative;
          z-index: 10;
        }

        &::before {
          content: "";
          position: absolute;
          background: rgba(235, 28, 47, 0.38);
          width: 25px;
          height: 25px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
        }
      }

      &__pic {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
      }
    }

    &:hover {
      .news-item {
        &__pic {
          &::before {
            opacity: 1;
          }
        }
      }
    }
  }

  &--horizontal {
    display: flex;
    flex-direction: column;

    .news-item {
      &__content {
        padding: 15px 0;
      }

      &__pic {
        width: 100%;
        margin-bottom: 15px;
        margin-bottom: 0;
        margin-inline-end: 0;
      }

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

  &--date-background {
    .news-item {
      &__date {
        width: max-content;
        border-radius: 5px;
        padding: 3px 6px;
      }
    }
  }

  &--dot {
    .news-item {
      &__content {
        display: flex;
      }

      &__dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #d62828;
        margin-inline-end: 10px;
        flex-shrink: 0;
        margin-top: 6px;
      }
    }
  }

  &__pic {
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;

    img {
      width: 100%;
      transition: all .2s linear;
    }

    &::before {
      font-family: "niafam" !important;
      content: "\e925";
      background-color: rgba(0, 0, 0, 0.65);
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
      left: 0;
      position: absolute;
      z-index: 4;
      font-size: 1.8rem;
      color: var(--secondary-color);
      opacity: 0;
      -webkit-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
    }

    .cover-link {
      z-index: 5;
    }

    &:hover {
      &::before {
        opacity: 1;
      }
    }

    .news-item {
      &__date {
        position: absolute;
        z-index: 10;
        bottom: 15px;
        right: 15px;
        border-radius: 5px;
        padding: 2px 8px;
        height: 26px;
        pointer-events: none;
      }
    }
  }

  &__content {}

  &__title {
    &:hover {
      color: #ff9b18;
    }
  }

  &__lead {
    margin-top: 10px;
  }

  &__date {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #a6b1e1;

    i {
      margin-inline-end: 5px;
    }

    span {
      padding-top: 3px;
    }
  }

  &__more {
    margin-top: 14px;
    display: flex;
    padding: 10px 16px;
    justify-content: center;
    align-items: center;
    max-width: max-content;
    gap: 10px;
    border-radius: 8px;
    background: rgba(237, 237, 237, 0.60);

    &:hover {
      background-color: #3A95C8;
      color: white;
    }
  }

  &__border {
    position: relative;
    padding-inline-start: 14px;
    margin-top: 12px;

    &::before {
      content: "";
      position: absolute;
      background: #eb1c2f;
      right: 0;
      height: 100%;
      width: 5px;
    }
  }

  &:hover {
    .news-item__title {
      color: #135880;
    }

    .news-item__pic {
      img {
        transform: translate(-50%, -50%) rotate(-2deg) scale(1.08);
      }
    }
  }
}

.nav {
  &__head {
    ul {
      display: flex;
    }

    li {
      margin-inline-end: 5px;
    }

    a {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: max-content;
      padding: 0 15px;
      height: 30px;
      border-radius: 5px;
      background: #f5f5f5;

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 24px;
        height: 7px;
        transform: translateX(-50%) translateY(100%);
        background-image: url("../img/arrow-down.svg");
        background-position: top center;
        opacity: 0;
        transition: all 0.2s linear;
      }

      &.active {
        background: #d62828;
        color: var(--secondary-color);

        &::before {
          opacity: 1;
        }
      }

      &:hover {
        color: var(--secondary-color);
        background: #d62828;
      }
    }
  }

  &__content {}
}

.scrollbar {
  .os-scrollbar-vertical {
    right: 12px;
  }

  .os-scrollbar-handle {
    background: #eeeeee !important;
    width: 5px;
    cursor: pointer;

    &:hover {
      background: #d6d6d6 !important;
    }
  }

  &--shadow {
    &::before {
      content: "";
      pointer-events: none;
      width: 100%;
      height: 198px;
      border-radius: 0px 0px 15px 15px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 5;
      transition: all 0.2s linear;
    }

    &:hover {
      &::before {
        opacity: 0;
      }
    }
  }
}

.button {
  min-width: 108px;
  height: 43px;
  border-radius: 10px;
  background: #fff;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    color: var(--secondary-color);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13);
  }

  &--border {
    border: 1px solid #3083ff;
    background: none;

    &:hover {
      color: inherit;
    }
  }
}