@import 'styles/settings';
@import 'styles/functions';

.c-button {
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0;
  border: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  -webkit-font-smoothing: antialiased;
  font-family: $font-family-1;
  font-size: $font-size-default;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.8;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: all $animation-time $ease-in-out-sine;

  > * + * {
    margin: 0 $space-1 0 0;
  }

  // themes
  &.-dark {
    color: palette(gray, 'dark');
    border-color: palette(gray, 'lightest');
  }

  &.-light {
    color: palette(white);
    border-color: palette(white);

    &.-disabled {
      color: rgba(palette(white), .5);
      border-color: rgba(palette(white), .5);
    }
  }

  &.-blue {
    color: palette(blue);
    border-color: palette(blue);
  }

  // colours
  &.-bg-dark-blue {
    background: palette(blue, dark);
    border-color: palette(blue, dark);

    &:hover,
    &:active {
      background: lighten(palette(blue, darkest), 15%);
      border-color: lighten(palette(blue, darkest), 15%)
    }
  }

  &.-bg-light-blue {
    background: palette(blue, secondary);
    border-color: palette(blue, secondary);

    &:hover,
    &:active {
      background: darken(palette(blue, secondary), 3%);
      border-color: darken(palette(blue, secondary), 3%);
    }

    &.-disabled {
      background: rgba(palette(blue, secondary), .5);
      border-color: rgba(palette(blue, secondary), .5);
    }
  }

  &.-bg-white {
    background: palette(white);
    border-color: palette(white);

    &:hover,
    &:active {
      background: darken(palette(white), 5%);
      border-color: darken(palette(white), 5%);
    }
  }

  &.-bg-transparent {
    background: transparent;
  }

  // sizes
  &.-regular {
    padding: $space-1/2 $space-1;
  }

  &.-large {
    padding: $space-1 * 2 $space-1 * 4;
  }

  // other modificators
  &.-uppercase {
    text-transform: uppercase;
  }

  &.-bold {
    font-weight: 700;
  }

  &.-border {
    border: 1px solid transparent;
  }

  &.-disabled {
    pointer-events: none;
    cursor: default;
  }
}