@use "sass:math";
@use "_breakpoints.scss";

.button {
  background: none;
  border: var(--border);
  border-color: var(--link-color);
  padding: var(--halfspacing) 0;
  cursor: pointer;
  display: block;
  text-align: center;
  white-space: nowrap;
  font-weight: var(--bold);
  transition:
    color 400ms,
    border-color 400ms;
  @include breakpoints.small {
    font-size: var(--small-font);
  }
  @include breakpoints.medium-large {
    font-size: var(--medium-font);
  }
  &.button-disabled {
    cursor: default;
  }
  &,
  &:link,
  &:visited {
    color: var(--text);
    text-decoration: none;
  }

  &:hover {
    color: var(--hover-color);
    border-color: var(--hover-color);
    border-style: solid;
    text-decoration: none;
  }

  &--small {
    font-size: var(--small-font);
    padding: var(--quarterspacing) var(--halfspacing);
  }

  &--large {
    padding: var(--spacing);
    font-size: var(--large-font);
  }

  // &--disabled {
  //   color: $tealDarker;
  // }

  &--active {
    border-style: solid;
  }
}

.button-group {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  //   display: inline-flex;
  vertical-align: middle;

  .button {
    // flex-grow: 1;
    //   flex-basis: 0;
    border-left-width: 0;

    &:hover {
      border-left-color: var(--border-color);
      border-right-color: var(--border-color);

      &:first-child {
        border-left-color: var(--hover-color);
        border-right-style: dashed;
      }
      &:last-child {
        border-right-color: var(--hover-color);
        border-left-style: dashed;
      }
    }

    &--active {
      cursor: default;
      pointer-events: none;
      &:first-child {
        border-right-style: dashed;
      }
      &:last-child {
        border-left-style: dashed;
      }
    }

    &:first-child {
      border-left-width: 1px;
    }
  }
}
