.privacy-dropdown {

  &__dropdown {
    position: absolute;
    background: $simple-background-color;
    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
    border-radius: 4px;
    margin-left: 40px;
    overflow: hidden;
    z-index: 10000;

    &.top {
      transform-origin: 50% 100%;
    }

    &.bottom {
      transform-origin: 50% 0;
    }
  }

  &__option {
    color: $inverted-text-color;
    padding: 10px;
    cursor: pointer;
    display: flex;

    &:hover,
    &.active {
      background: $ui-highlight-color;
      color: $primary-text-color;
      outline: 0;

      .privacy-dropdown__option__content {
        color: $primary-text-color;

        strong {
          color: $primary-text-color;
        }
      }
    }

    &.active:hover {
      background: lighten($ui-highlight-color, 4%);
    }

    &__icon {
      margin-right: 10px;

      @include flex(center, center);
    }

    &__content {
      flex: 1 1 auto;
      color: $lighter-text-color;

      strong {
        font-weight: 500;
        display: block;
        color: $inverted-text-color;

        @each $lang in $cjk-langs {
          &:lang(#{$lang}) {
            font-weight: 700;
          }
        }
      }
    }
  }

  &.active & {
    &__dropdown {
      display: block;
      box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
    }


    &__value {
      background: $simple-background-color;
      border-radius: 4px 4px 0 0;
      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);

      .icon-button {
        transition: none;
      }

      &.active {
        background: $ui-highlight-color;

        .icon-button {
          color: $primary-text-color;
        }
      }
    }
  }

  &.active.top & {
    &__value {
      border-radius: 0 0 4px 4px;
    }
  }
}