//////////////////////////////////////////////////////////////////////////////////////////
//   _  _ ____ _  _ ___  ____                                                           //
//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
//                                                                                      //
//////////////////////////////////////////////////////////////////////////////////////////

// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: MIT

@use 'sass:color';

@use './variables.scss' as *;

@mixin background-transition {
  transition: background-color 0.3s;

  &:hover {
    transition: background-color 0.1s;
  }
}

@mixin text-input {
  @include background-transition;

  color: $text-normal;
  background-color: $widget-normal;

  border: none;
  border-radius: 8px;
  box-sizing: border-box;

  cursor: text;

  padding: 5px 10px;
  font-size: 1em;

  &:hover {
    background-color: $widget-normal-hover;
  }
}

@mixin normal-button {
  @include background-transition;

  color: $text-normal;
  background-color: $widget-normal;

  border-radius: 8px;
  box-sizing: border-box;
  border: none;

  &.pressed {
    background-color: $widget-normal-active;
  }

  &:not(.selected):hover {
    background-color: $widget-normal-hover;
  }

  &:not(.selected):active {
    transform: translateY(1px);
  }
}

@mixin primary-button {
  @include normal-button;

  background-color: light-dark($key-light, $key-dark);

  &:not(.selected):hover {
    background-color: light-dark(
      color.adjust($key-light, $lightness: -10%),
      color.adjust($key-dark, $lightness: 10%)
    );
  }
}

@mixin invisible-button {
  @include normal-button;

  background-color: transparent;

  &:not(.selected):hover {
    background-color: $widget-normal;
  }
}

@mixin tool-button {
  @include normal-button;

  background-color: transparent;
  opacity: 0.7;

  &:not(.selected):hover {
    background-color: transparent;
    opacity: 1;
  }
}

@mixin raised-button {
  @include normal-button;

  background-color: light-dark($base-light, color.adjust($base-dark, $lightness: 5%));

  box-shadow: 0 2px 4px light-dark(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.2));
  border: 1.5px solid
    light-dark(
      color.adjust($base-light, $lightness: -10%),
      color.adjust($base-dark, $lightness: -10%)
    );

  &:not(.selected):hover {
    background-color: light-dark(
      color.adjust($base-light, $lightness: -3%),
      color.adjust($base-dark, $lightness: 10%)
    );
  }

  &.selected {
    border: $border-selected;
  }
}
