@import (reference) '../style/variables.less';

.@{prefix}-locale-select {
  position: relative;
  display: inline-block;
  border: 1px solid #dadadf;
  border-radius: 14px;
  transition: background 0.2s;

  &:hover {
    background-color: #fafafa;
  }

  &:not([data-locale-count='1']):not([data-locale-count='2'])::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top: 6px solid #7b7f8d;
    pointer-events: none;
  }

  a,
  span,
  select {
    padding: 0 24px 0 16px;
    height: 28px;
    text-align: center;
    text-decoration: none;
    line-height: 28px;
    appearance: none;
    border: 0;
    font-size: 16px;
    color: #7b7f8d;
    background: transparent;
    outline: none;
    cursor: pointer;
  }

  a,
  span {
    padding-right: 16px;
  }
}