hensei-web/components/Button/index.scss

.Button {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: $grey-55;
  display: inline-flex;
  font-size: $font-button;
  font-weight: $normal;
  gap: 6px;
  padding: 8px 12px;

  &:hover {
    background: $grey-100;
    cursor: pointer;
    color: $grey-15;

    .icon svg {
      fill: $grey-15;
    }

    .icon.stroke svg {
      fill: none;
      stroke: $grey-15;
    }
  }

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

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

  &.save:hover {
    color: #ff4d4d;

    .icon svg {
      fill: #ff4d4d;
      stroke: #ff4d4d;
    }
  }

  &.save.Active {
    color: #ff4d4d;

    .icon svg {
      fill: #ff4d4d;
      stroke: #ff4d4d;
    }

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

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

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

  &.modal.destructive {
    color: $error;

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

  .icon {
    margin-top: 2px;

    svg {
      fill: $grey-55;
      height: 12px;
      width: 12px;
    }

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

    &.stroke svg {
      fill: none;
      stroke: $grey-55;
    }

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

  &.Active {
    background: $grey-100;
  }

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