@import '../LangSwitch/index.less';

.@{prefix}-rtl-switch {
  height: 16px;
  padding: 0;
  appearance: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;

  [class*='-switch'] + &,
  [class*='-select'] + & {
    margin-inline-start: 15px;
    margin-inline-end: -15px;
    padding-inline: 15px;
    border-inline-start: 1px solid @c-border-light;

    @{dark-selector} & {
      border-inline-start-color: @c-border-less-dark;
    }
  }

  > svg {
    height: 16px;
    fill: @c-text-secondary;

    @{dark-selector} & {
      fill: @c-text-secondary-dark;
    }
  }

  &:hover svg {
    fill: @c-primary;

    @{dark-selector} & {
      fill: @c-primary-dark;
    }
  }
}

html[data-direction='rtl'] {
  direction: rtl;
}