@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
@use "../../../../styles/fonts" as fonts;

.flight-action-btn {
  padding: vars.$space-s2 16px;
  border-radius: vars.$border-radius;
  cursor: pointer;
  font-size: fonts.$font-size-m;
  border: none;
  font-family: inherit;
  transition: opacity 0.2s, background-color 0.2s;

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  &--orange {
    background: colors.$orange;
    color: colors.$white;

    &:hover:not(:disabled) {
      background: colors.$orange--hover;
    }
  }

  &--blue-light {
    background: colors.$blue-icon;
    color: colors.$blue-dark;

    &:hover:not(:disabled) {
      background: colors.$border-blue;
    }
  }

  &--transparent {
    background: transparent;
    padding: vars.$space-s2;
    color: colors.$blue;

    &:hover:not(:disabled) {
      background: colors.$blue-extra-light;
    }
  }

  &--small {
    font-size: fonts.$font-size-s;
    padding: 4px vars.$space-s2;
  }
}
