@use "variables";

a.fwe-btn,
button.fwe-btn {
  line-height: normal;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-family: variables.$font-family-base;
  font-size: variables.$font-size-base;
  padding: 4px 16px;
  min-height: 32px;
  color: variables.$text;
  background: variables.$control;
  border-radius: variables.$control-border-radius;
  cursor: pointer;
  border: none;

  i[class^="fwe-icon-"],
  i[class*=" fwe-icon-"],
  .fwe-svg-icon {
    margin-right: 8px;
  }

  &:hover {
    color: variables.$text;
    background: variables.$control-hover;
  }

  &:active {
    background: variables.$control-active;
  }

  &:focus {
    outline: 0;
  }

  &:disabled,
  &.fwe-disabled {
    cursor: default;
    background: variables.$control-disabled;
    color: variables.$text-disabled;
  }

  &.fwe-btn-hero {
    color: variables.$white;
    background: variables.$hero;

    &:hover {
      color: variables.$white;
      background: variables.$hero-hover;
    }

    &:active {
      background: variables.$hero-active;
    }

    &:disabled,
    &.fwe-disabled {
      background: variables.$control-disabled;
      color: variables.$text-disabled;
    }
  }

  &.fwe-btn-block {
    width: 100%;
  }

  &.fwe-btn-link {
    background: none;
    color: variables.$hero;
    padding: 0;

    i[class^="fwe-icon-"],
    i[class*=" fwe-icon-"],
    .fwe-svg-icon {
      margin-right: 4px;
    }

    &.fwe-dark {
      color: variables.$text;
    }

    &:hover {
      background: none;
      color: variables.$hero-hover;
    }

    &:active {
      background: none;
      color: variables.$hero-hover;
    }

    &:disabled,
    &.fwe-disabled {
      color: variables.$text-disabled;
    }
  }

  &.fwe-btn-lg {
    padding: 4px 24px;
    min-height: 48px;
    i[class^="fwe-icon-"],
    i[class*=" fwe-icon-"] {
      font-size: 24px;
    }
  }

  &.fwe-btn-icon {
    border-radius: 50%;
    padding: 0px;
    height: 32px;
    width: 32px;
    justify-content: center;

    &.fwe-btn-lg {
      height: 48px;
      width: 48px;
    }

    i[class^="fwe-icon-"],
    i[class*=" fwe-icon-"],
    .fwe-svg-icon {
      margin-right: 0px;
    }
  }

  &.fwe-btn-lg.fwe-btn-icon.fwe-btn-floating {
    box-shadow: 0px 1px 8px rgba(black, 0.13);
  }
}

a.fwe-btn.fwe-disabled {
  pointer-events: none;
}