.langs {
  position: relative;
  text-transform: uppercase;
  user-select: none;
  .langs-button {
    display: inline-flex;
    align-items: center;
    font-family: 'Plexels';
    font-weight: inherit;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    svg {
      width: auto;
      height: 0.5em;
      fill: currentColor;
      margin-left: 8rem;
      position: relative;
      top: -0.08em;
      transition: transform 1s var(--curve);
    }
  }
  .langs-items {
    width: 100vw;
    max-width: 216rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24rem;

    position: absolute;
    right: 0;
    top: calc(100% + 8rem);
    background: #030303;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8rem;
    box-sizing: border-box;
  }
  .langs-item {
    width: 100%;
    line-height: 1;
    &:not(:last-child) {
      padding-bottom: 10rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      margin-bottom: 13rem;
      box-sizing: border-box;
    }
    &:not(.active) {
      color: rgba(255, 255, 255, 0.35);
      &:hover {
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  &:not(.open) {
    .langs-items {
      display: none;
    }
  }
  &.open {
    .langs-button {
      svg {
        transform: rotate(180deg);
      }
    }
  }
}