@import 'style/theming';

.button {
  transition: all .2s;
  padding: .35em 1em;
  text-align: center;
  border-radius: 4px;
  outline: none;

  @include themed() {
    color: t(foreground-color);

    &--alt,
    &--transparent {
      &:hover {
        background: #eee;
      }
    }

    &--alt {
      color: t(foreground-color-alt);
      background: t(button-color-alt);
      border: 1px solid t(foreground-color-alt);

      :deep(svg) {
        fill: t(foreground-color-alt);
      }
    }

    &--normal {
      color: t(background-color);
      background: t(button-color);
      border: 1px solid t(background-color);

      :deep(svg) {
        fill: t(background-color);
      }

      font-size: .9rem;
      font-weight: bold;
    }
  }
  
  &__icon {
    :deep(svg) {
      width: 1.2em !important;
    }
  }

  &--small {
    padding: .4rem 1.4rem;
  }

  &--medium {
    padding: .6rem 2.2rem;
  }

  &--large {
    padding: 1.2rem 2.6rem;
  }

  // &--neutral {
  //   @include normal-style($color: $neutral-foreground-color);
  // }

  // &--success {
  //   @include normal-style($color: $success-foreground-color);
  // }
  
  // &--critical {
  //   @include normal-style($color: $critical-foreground-color);
  // }
}