@import '../settings/variables';
@import '../tools/mixins/transition';

.c-button {
  @include transition((color, border-color, opacity));
  border: $button-border-width solid $color-separator;
  border-radius: $panel-item-radius;
  color: $color-secondary;
  cursor: pointer;
  display: inline-block;
  font-size: 0.75em;
  font-weight: $font-weight-normal;
  line-height: 1em;
  padding: 0.75em 1.5em;
  user-select: none;

  &:hover,
  &--active {
    color: $color-labels;
    border-color: $color-primary;
  }

  &--login {
    font-size: 1rem;
    border-width: 0;
    background-color: $color-primary;
    color: $color-logo;
    padding: $gutter-normal $gutter-big;
    &:hover {
      background-color: $color-button-active-hover;
      color: $color-white;
      transition: 0.2s ease-in-out;
    }
  }

  &--filled {
    color: $color-background;
    background-color: $color-primary;
    border: none;

    &:hover {
      background-color: $color-primary-dark;
      color: #fff;
      transition: 0.2s ease-in-out;
    }
  }

  &--disabled {
    color: $color-paragraph-light;
    border-color: $color-paragraph-light;
    cursor: default;

    &:hover {
      color: $color-paragraph-light;
    }
  }

  &__label {
    flex: 1 1 auto;
  }

  &--with-icon {
    display: flex;
  }

  &--light {
    font-size: 1em;
    color: $color-white;
  }

  &--left-padding {
    padding-left: 1em;
    padding-right: 0;
  }

  &--big {
    font-size: 0.875em;
  }

  &--small {
    padding: 0.5em 1em;
  }

  &--main {
    font-size: 1em;
    padding: 1em 2em;
  }

  &--border {
    color: $color-primary;
    border-radius: $panel-item-radius;
    border: 2px solid $color-button-border;
    font-size: $font-size-normal;

    &:hover {
      background-color: $color-button-hover;
    }
    &-text {
      color: $color-primary;
    }
  }
}

.c-button__icon {
  align-self: flex-end;
}