@import '../styles/colors';
@import './keyframes';
@import './mixins';

$border-radius: 0.25em;
$line-height: 1rem;
$padding-y: 0.5em;
$padding-x: 0.75em;
$button-height: 1em + (2 * $padding-y);

.btn {
  border-radius: $border-radius;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  outline: none;
  line-height: 1rem;
  padding: $padding-y $padding-x;
  position: relative;

  // child components
  .children { visibility: visible; }
  .icon { margin-right: 0.375em; }

  // modifiers
  &.circle {
    border-radius: $button-height / 2;
    height: $button-height;
    width: $button-height;

    .children {
      position: absolute;
      // TODO: look into performance considerations for translate vs. margin-top
      transform: translateX(-50%) translateY(-50%);
    }
  }

  &.block {
    display: block;
    text-align: center;
    width: 100%;
  }

  &.xs { font-size: 0.6rem; }
  &.sm { font-size: 0.8rem; }
  &.md { font-size: 1rem; }
  &.lg { font-size: 1.2rem; }
  &.xl { font-size: 1.4rem; }

  // states
  &.loading {
    .loader { visibility: visible; }
    .children { visibility: hidden; }
  }

  &:disabled { cursor: default; }
}

.secondary {
  composes: btn;
  @include button-solid($lighter, $dark);

  &.active {
    @include button-solid(darken($lighter, 10%), $dark);
  }
}

.secondary-outline {
  composes: btn;
  @include button-outline($light);
}

.primary {
  composes: btn;
  @include button-solid($blue, #FFF);

  &.active {
    @include button-solid(darken($blue, 10%), #FFF);
  }
}

.primary-outline {
  composes: btn;
  @include button-outline($blue);
}

.success {
  composes: btn;
  @include button-solid($green, #FFF);

  &.active {
    @include button-solid(darken($green, 10%), #FFF);
  }
}

.success-outline {
  composes: btn;
  @include button-outline($green);
}

.danger {
  composes: btn;
  @include button-solid($red, #FFF);

  &.active {
    @include button-solid(darken($red, 10%), #FFF);
  }
}

.danger-outline {
  composes: btn;
  @include button-outline($red);
}

.group {
  &.spaced {
    .btn { margin-right: 0.5rem; }
    .btn:last-child { margin-right: 0; }
  }

  &.grouped {
    .btn { border-radius: 0; }

    .btn:first-child {
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }

    .btn:last-child {
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }
}