hensei-web/components/common/Button/index.module.scss

.button {
  align-items: center;
  background: var(--button-bg);
  border: 2px solid transparent;
  border-radius: $input-corner;
  color: var(--button-text);
  display: inline-flex;
  font-size: $font-button;
  font-weight: $normal;
  justify-content: center;
  gap: 6px;
  transition: 0.18s opacity ease-in-out;
  user-select: none;
  transition: background-color 0.18s ease-out, color 0.18s ease-out;

  .text {
    align-items: center;
    color: inherit;
    display: flex;
    // width: 100%;
  }

  &:hover,
  &.blended:hover,
  &.blended.active {
    background: var(--button-bg-hover);
    cursor: pointer;
    color: var(--button-text-hover);

    .accessory svg {
      fill: var(--button-text-hover);
    }

    .Accessory svg.stroke {
      fill: none;
      stroke: var(--button-text-hover);
    }
  }

  // Modifiers
  &.full {
    width: 100%;
  }

  &.grow {
    flex-grow: 1;
  }

  &.no-shrink {
    flex-shrink: 0;
  }

  &.blended {
    background: transparent;
  }

  &.bound {
    background: var(--button-contained-bg);

    &:hover {
      background: var(--button-contained-bg-hover);
    }

    &.save:hover .Accessory svg {
      fill: #ff4d4d;
      stroke: #ff4d4d;
    }

    &.save {
      color: #ff4d4d;

      &.Active .Accessory svg {
        fill: #ff4d4d;
        stroke: #ff4d4d;
      }

      &:hover {
        color: darken(#ff4d4d, 30);

        .Accessory svg {
          fill: darken(#ff4d4d, 30);
          stroke: darken(#ff4d4d, 30);
        }
      }
    }
  }

  &.bound.blended {
    background: var(--dialog-bg);

    &:hover {
      background: var(--input-bound-bg);
    }
  }

  &.floating {
    pointer-events: none;
    position: absolute;
    opacity: 0;
    z-index: 99;
  }

  &.jobAccessory.icon {
    align-items: center;
    border-radius: 99px;
    justify-content: center;
    position: relative;
    padding: $unit * 1.5;
    top: $unit;
    left: $unit;
    height: auto;
    z-index: 10;

    &:hover .accessory svg,
    &.selected .accessory svg {
      fill: var(--button-text-hover);
    }

    .accessory svg {
      fill: var(--button-text);
      width: $unit-3x;
      height: auto;
    }
  }

  &.remixed.small {
    padding: $unit-half * 1.5;

    &:disabled {
      background-color: var(--button-bg-disabled);

      .accessory svg {
        fill: var(--button-text-disabled);

        &:hover {
          fill: var(--button-text-disabled);
        }
      }
    }

    .accessory svg {
      height: 12px;
      width: 12px;
    }

    .text {
      font-size: $font-tiny;
    }

    @include breakpoint(phone) {
      .text {
        display: none;
      }
    }
  }

  // Sizes
  &.icon {
    aspect-ratio: 1 / 1;

    .text {
      display: none;

      @include breakpoint(tablet) {
        display: block;
      }

      @include breakpoint(phone) {
        display: block;
      }
    }
  }

  &.small {
    font-size: $font-small;
    padding: $unit * 1.5;
  }

  &.medium {
    height: $unit * 5.5;
    padding: ($unit * 1.5) $unit-2x;
  }

  &.large {
    font-size: $font-large;
    padding: $unit-2x $unit-3x;
  }

  // Special variations
  &.filter {
    &.filtersActive .accessory svg {
      fill: var(--accent-blue);
      stroke: none;
    }

    &:hover {
      background: var(--button-bg);

      .accessory svg {
        fill: var(--button-text);
      }
    }

    .accessory svg {
      fill: none;
      stroke: var(--button-text);
    }
  }

  &.save {
    .accessory svg {
      fill: none;
      stroke: var(--button-text);
    }

    &.saved {
      color: $save-red;

      .accessory svg {
        fill: $save-red;
        stroke: $save-red;
      }

      &:hover {
        color: $save-red;

        .accessory svg {
          fill: none;
          stroke: $save-red;
        }
      }
    }

    &:hover {
      color: $save-red;

      .accessory svg {
        fill: $save-red;
        stroke: $save-red;
      }
    }
  }

  &.iconButton.medium {
    height: inherit;
    padding: $unit-half;

    &:hover {
      background: none;
    }

    .text {
      font-size: $font-small;
      font-weight: $bold;

      @include breakpoint(phone) {
        display: none;
      }
    }
  }

  &.options {
    box-shadow: 0px 1px 3px rgb(0 0 0 / 14%);
    left: 8px;
    top: 8px;
  }

  &:disabled {
    background-color: var(--button-bg-disabled);
    color: var(--button-text-disabled);

    &:hover {
      background-color: var(--button-bg-disabled);
      color: var(--button-text-disabled);
      cursor: default;
    }
  }

  @include breakpoint(phone) {
    &.destructive {
      background: $error;
      color: $grey-100;

      .Accessory svg {
        fill: $grey-100;
      }
    }
  }

  &.destructive:hover {
    background: $error;
    color: $grey-100;

    .accessory svg {
      fill: $grey-100;
    }
  }

  &.modal:hover {
    background: $grey-90;
  }

  &.modal.destructive {
    color: $error;

    &:hover {
      color: darken($error, 10);
    }
  }

  &.notice {
    background-color: var(--notice-button-bg);
    color: var(--notice-button-text);

    &:hover {
      background-color: var(--notice-button-bg-hover);
    }
  }

  &.destructive {
    background: $error;
    color: white;

    &:hover {
      background: darken($error, 15);
    }
  }

  .accessory {
    $dimension: $unit-2x;

    display: flex;

    &.arrow {
      margin-top: $unit-half;
    }

    &.flipped {
      transform: rotate(180deg);
    }

    svg {
      fill: var(--button-text);
      height: $dimension;
      width: $dimension;

      &.stroke {
        fill: none;
        stroke: var(--button-text);
      }

      &.Add {
        height: 18px;
        width: 18px;
      }

      &.Check {
        height: 22px;
        width: 22px;
      }
    }

    &.check svg {
      margin-top: 1px;
      height: 14px;
      width: auto;
    }

    svg &.settings svg {
      height: 13px;
      width: 13px;
    }
  }

  &.btn-blue {
    background: $blue;
    color: #8b8b8b;

    &:hover {
      background: #4b9be5;
      color: #233e56;
    }
  }

  &.btn-red {
    background: #fa4242;
    color: #860f0f;

    &:hover {
      background: #e91a1a;
      color: #4e1717;

      .icon {
        color: #4e1717;
      }
    }

    .icon {
      color: #860f0f;
    }
  }

  &.btn-disabled {
    background: #e0e0e0;
    color: #bababa;

    &:hover {
      background: #e0e0e0;
      color: #bababa;
    }
  }

  &.wind {
    background: var(--wind-bg);
    color: var(--wind-text);

    &:hover {
      background: var(--wind-bg-hover);
      color: var(--wind-text-hover);
    }
  }

  &.fire {
    background: var(--fire-bg);
    color: var(--fire-text);

    &:hover {
      background: var(--fire-bg-hover);
      color: var(--fire-text-hover);
    }
  }

  &.water {
    background: var(--water-bg);
    color: var(--water-text);

    &:hover {
      background: var(--water-bg-hover);
      color: var(--water-text-hover);
    }
  }

  &.earth {
    background: var(--earth-bg);
    color: var(--earth-text);

    &:hover {
      background: var(--earth-bg-hover);
      color: var(--earth-text-hover);
    }
  }

  &.dark {
    background: var(--dark-bg);
    color: var(--dark-text);

    &:hover {
      background: var(--dark-bg-hover);
      color: var(--dark-text-hover);
    }
  }

  &.light {
    background: var(--light-bg);
    color: var(--light-text);

    &:hover {
      background: var(--light-bg-hover);
      color: var(--light-text-hover);
    }
  }
}

// CSS modules suck
:global(.unit:hover) .floating,
:global(.unit) .floating.active {
  pointer-events: initial;
  opacity: 1;
}