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

.container {
  @include boxSizing;

  height: 50px;

  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  place-items: center;
  width: max-content;

  padding: 5px 15px;

  font-weight: bold;

  cursor: pointer;

  div {
    direction: ltr;
  }

  .icon {
    height: 40px;
    padding: 5px 0;

    svg {
      height: 100%;
    }
  }

  &.navigation {
    color: white;
    background-color: var(
      --navigation-button-background-color,
      $navigation-button-background-color
    );
    width: fit-content;
    text-decoration: none;
    box-sizing: border-box;

    svg * {
      stroke: var(
        --navigation-button-stroke-color,
        $navigation-button-stroke-color
      );
    }

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

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

      svg * {
        stroke: var(
          --navigation-button-stroke-active-color,
          $navigation-button-stroke-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);

      svg * {
        opacity: 0.5;
      }
    }
  }

  &.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;

    svg * {
      stroke: var(--context-button-stroke-color, $context-button-stroke-color);
    }

    &: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;

      svg * {
        stroke: white;
      }
    }

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

      svg * {
        stroke: var(--composite-button-context-disabled-color, $composite-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(--composite-button-active-color, $composite-button-active-color);
    }

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