@import (reference) '../../theme/index.less';

.localizeButton {
  display: flex;
  align-items: center;
}
.localizeContainer {
  color: @gray-03;
  font-size: 15px;
  svg {
    fill: @gray-03;
    margin-right: 5px;
  }
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  transition: all 2s;
  padding-bottom: 5px;

  &:focus,
  &:hover {
    outline: none;
    text-decoration: none;
    outline-offset: initial;
    border: transparent;
    box-shadow: 0 0 0 transparent;
    color: @gray-06;
    svg {
      fill: @gray-06;
      transition: all 2s;
    }
  }

  &:after,
  &:before {
    transition: all 0.5s;
  }

  &:active:after,
  &:focus:after,
  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: ' ';
    color: transparent;
    background: @accessible-blue;
    height: 1px;
    text-align: left;
    opacity: 0;
  }

  &:active:after,
  &:focus:after,
  &:hover:after {
    opacity: 1;
    width: 100%;
  }

  &:hover:after {
    animation: fill 1s forwards;
  }
}