@import '../../../styles/common.scss';

.container {
  all: unset; // remove all button styling

  @include boxSizing;

  height: 30px;

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-items: center;

  padding: 0px 15px;

  font-weight: bold;

  cursor: pointer;

  &.navigation {
    color: white;
    background-color: var(
      --navigation-button-background-color,
      $navigation-button-background-color
    );
    width: fit-content;

    &:hover {
      background-color: var(
        --navigation-button-background-color-hover,
        $navigation-button-background-color-hover
      );
    }

    &:active {
      background-color: var(
        --navigation-button-background-active-color,
        $navigation-button-background-active-color
      );
      color: var(
        --navigation-button-background-active-color,
        $navigation-button-background-active-color
      );
    }

    &.disabled {
      background-color: var(
        --navigation-button-background-disabled-color,
        $navigation-button-background-disabled-color
      );
      pointer-events: none;
      color: color-mix(in srgb, white 50%, transparent);
    }
  }

  &.context {
    color: var(--context-button-border-color, $context-button-border-color);
    border: 1px solid
      var(--context-button-border-color, $context-button-border-color);
    background-color: white;

    transition: box-shadow 0.15s ease-in-out 0s;

    &:hover {
      border: 1px solid
        var(
          --context-button-hover-border-color,
          $context-button-hover-border-color
        );
      box-shadow: 0 0 0 2px
        var(
          --context-button-hover-border-color,
          $context-button-hover-border-color
        );
    }

    &:active {
      background-color: var(
        --context-button-active-color,
        $context-button-active-color
      );
      color: white;
    }

    &:disabled {
      border: 1px solid var(--text-button-context-disabled-border-color, $text-button-context-disabled-border-color);
      color: var(--text-button-context-disabled-color, $text-button-context-disabled-color);
    }
  }

  &.active {
    color: white;
    background-color: var(
      --active-button-background-color,
      $active-button-background-color
    );

    &:hover {
      background-color: var(
        --active-button-hover-background-color,
        $active-button-hover-background-color
      );
    }

    &:active {
      background-color: white;
      color: var(--text-button-active-color, $text-button-active-color);
    }

    &:disabled {
      background-color: var(--text-button-active-disabled-background-color, $text-button-active-disabled-background-color);
      color: color-mix(in srgb, white 50%, transparent);
    }
  }
}
