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

.pill {
  position: relative;
}

.badge {
  top: -4px;
  left: 17px;
}

.hideMobile {
  display: none;
}
.buttonContent {
  align-items: center;
  display: flex;
  margin-left: 8px;
  z-index: 10;
  font-weight: 400;
  @media screen and (max-width: @screen-md) {
    &.hiddenMd {
      .hideMobile;
    }
  }
  @media screen and (max-width: @screen-sm) {
    &.hiddenSm {
      .hideMobile;
    }
  }
  @media screen and (max-width: @screen-xs) {
    &.hiddenXs {
      .hideMobile;
    }
  }
}

.buttonClass {
  background-color: transparent !important;
  color: @white !important;
  fill: @white !important;
  &:focus-visible {
    outline: -webkit-focus-ring-color auto 1px !important;
  }
  &:focus {
    border: none !important;
    box-shadow: none !important;
  }
  &:hover,
  &:disabled {
    color: @gray-02 !important;
    svg {
      fill: @gray-02 !important;
    }
  }
}