@import 'part:@lyra/base/theme/variables-style';

.root {
  display: block;
  position: relative;
  text-transform: uppercase;
  outline: none;
  cursor: default;
  border: 0;
  line-height: calc(
    var(--input-line-height) + var(--input-padding-horizontal) * 2 -
      var(--input-border-size) * 2
  );
  user-select: none;
  float: right;
  font-size: 1em;
  margin-top: calc(var(--input-padding-horizontal) * -1);
  padding: 0 1em;
  background-color: var(--gray-lighter);
  border-radius: var(--button-border-radius);

  &:first-child {
    margin-right: calc(var(--input-padding-vertical) * -1);
  }

  &:hover {
    background-color: var(--input-border-color-focus);
    border-color: var(--input-border-color-focus);
    color: var(--input-bg);
  }
}

.content {
  font-size: 0.8em;
  line-height: 1em;
}

.button {
  font-size: 0.7em;
}

.container {
  position: absolute;
  top: var(--extra-small-padding);
  right: calc(var(--extra-small-padding) * 2 + var(--input-border-size));
  z-index: 1;
}

.wrapper {
  position: relative;
}