hensei-web/components/Button/index.scss

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

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

  &.Blended {
    background: transparent;
  }

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

    &:hover {
      background: none;
    }

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

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

  &.Contained {
    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);
        }
      }
    }
  }

  &.Options {
    box-shadow: 0px 1px 3px rgb(0 0 0 / 14%);
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 3;
  }

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

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

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

  @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;
    }
  }

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

    &.Saved {
      color: #ff4d4d;

      .Accessory svg {
        fill: #ff4d4d;
        stroke: none;
      }
    }

    &:hover {
      color: #ff4d4d;

      .Accessory svg {
        fill: none;
        stroke: #ff4d4d;
      }
    }
  }

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

  &.modal.destructive {
    color: $error;

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

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

    display: flex;

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

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

  &.null {
    background: $grey-90;
    color: $grey-55;

    &:hover {
      background: $grey-70;
      color: $grey-15;
    }
  }

  &.wind {
    background: $wind-bg-20;
    color: $wind-text-10;

    &:hover {
      background: darken($wind-bg-20, 10);
    }
  }

  &.fire {
    background: $fire-bg-20;
    color: $fire-text-10;

    &:hover {
      background: darken($fire-bg-20, 10);
    }
  }

  &.water {
    background: $water-bg-20;
    color: $water-text-10;

    &:hover {
      background: darken($water-bg-20, 10);
    }
  }

  &.earth {
    background: $earth-bg-20;
    color: $earth-text-10;

    &:hover {
      background: darken($earth-bg-20, 10);
    }
  }

  &.dark {
    background: $dark-bg-10;
    color: $dark-text-10;

    &:hover {
      background: darken($dark-bg-10, 10);
    }
  }

  &.light {
    background: $light-bg-20;
    color: $light-text-10;

    &:hover {
      background: darken($light-bg-20, 10);
    }
  }

  .Text {
    color: inherit;
    display: block;
    width: 100%;
  }
}