@import '../../styles/variables';

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

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  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(--text-button-navigation-bg, $text-button-navigation-bg);

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

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

    &:disabled {
      background-color: var(--text-button-navigation-disabled-bg, $text-button-navigation-disabled-bg);
      color: rgba(white, 0.5);
    }
  }

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

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

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

    &:active {
      background-color: var(--text-button-context-active-bg, $text-button-context-active-bg);
      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(--text-button-active-bg, $text-button-active-bg);

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

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

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