.lang {
  position: relative;

  &__container {

  }

  &__btn {
    display: flex;
    cursor: pointer;
  }

  &__text {
    color: $white;
  }

  &__icon {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  &__arrow {
    margin: 0 10px;
    width: 10px;
    height: 7px;
    transition: .2s ease;

    &-down {
      background-image: url("../assets/resource/arrow.svg");
    }

    &-up {
      transform: translateY(-18px);
      background-image: url("../assets/resource/arrow-up.svg");
      position: absolute;
      transition: .2s ease;
    }
  }

  &__list {
    left: -15px;
    top: calc(100% + 5px);
    position: absolute;
    width: calc(100% + 7px);
    background: $white;
    border-radius: 6px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    transition: .4s ease;
    max-height: 0;
    overflow: hidden;
  }

  &__inner {
    padding: 15px;
  }

  &__item {
    margin-bottom: 8px;
    cursor: pointer;

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

  &_active {
    .lang {

      &__list {
        transition: .4s ease;
        max-height: 250px;
      }

      &__arrow {
        transition: .2s ease;
        &-down {
          transform: translateY(18px);
        }
        &-up {
          transform: translateY(0px);
        }
      }
    }
  }

  &_animation {
    .lang {

      &__link {
        color: $graphite;
        transition: .4s ease;

        &:hover {
          color: $primary;
          transition: .4s ease;
        }
      }
    }
  }
}