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

.reset {
  box-sizing: border-box;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  outline: none;
  appearance: none;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
  position: relative;
  height: @interaction-height;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.base {
  border-radius: @radius-large;
  padding: 0 (@grid * 3);
  color: currentColor;
  border: 1px solid @gray-3;
  font: @text-standard;
  height: @grid * 9;

  &:hover:not(.positive),
  &.positive {
    border-color: currentColor;
  }

  &:after {
    content: '';
    position: absolute;
    transform: translateY(-50%);
    min-height: @interaction-height;
    min-width: @interaction-height;
    left: -@grid * 2;
    right: -@grid * 2;
    height: 100%;
    top: 50%;
  }

  &:hover:not(.positive) {
    color: @highlight;
  }

  &:focus:not(:active):not(:hover):not(.positive) {
    box-shadow: @focus-outline;
  }

  &:active {
    transform: scale(0.98);
  }
}

.positive {
  color: @positive;
}

.iconContainer {
  position: relative;
  top: 1px;
  padding-left: 5px;
}