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

.container {
  border: none;
  background: none;

  @include boxSizing;

  height: 50px;
  width: 50px;

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

  padding: 5px;

  cursor: pointer;

  svg {
    height: 60%;
  }

  &.navigation {
    background-color: var(
      --navigation-button-background-color,
      $navigation-button-background-color
    );
    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: 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;

      svg * {
        opacity: 0.5;
      }
    }
  }

  &.context {
    padding: 4px;

    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
      );

      svg * {
        stroke: white;
      }
    }

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

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

  &.icon {
    border: none;
    background-color: none;

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

    svg {
      height: 45%;
    }

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

    &:hover {
      border: none;
      background-color: var(
        --icon-button-hover-color,
        $icon-button-hover-color
      );

      svg * {
        stroke: white;
      }
    }

    &:active {
      background-color: white;

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

    &:disabled {
      border: none;

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

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

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

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

    &:active {
      background-color: var(
        --active-button-active-background-color,
        $active-button-active-background-color
      );
      svg * {
        stroke: var(
          --active-button-active-stroke-color,
          $active-button-active-stroke-color
        );
      }
    }

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

      svg * {
        opacity: 0.5;
      }
    }
  }

  &:disabled,
  &:disabled.icon,
  &:disabled.context,
  &:disabled.active {
    pointer-events: none;
  }
}
