/// ----------------------------------------------------------------------

/// Buttons

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@use 'colours';
@use 'borders';
@use 'typography';
@use 'transitions';
@use 'states';

/// -------------------
/// Button config
/// -------------------

$padding-x: spacing.$lg !default;

/// -------------------
/// Button selectors
/// -------------------

.btn {
  @include lib.resets-style;
  @include lib.components-flow($border-width: 1px);
  font-weight: typography.$font-regular;
  justify-content: space-between;
  position: relative;
  border-radius: corners.$base;
  font-family: typography.$font-family;
  transition: color transitions.$ease, background-color transitions.$ease, border-color transitions.$ease;
  user-select: none;
  text-decoration: none;
  padding-left: $padding-x;
  padding-right: $padding-x;
  align-self: center;
  cursor: pointer;
  text-align: center;

  &:focus {
    @include states.focus;
  }

  &--disabled,
  &:disabled {
    @include states.disabled;
  }

  &--primary {
    background-color: colours.$brand-one;
    color: white;
    fill: white;

    &:hover {
      background-color: colours.$brand-two;
      // color: colours.$brand-one;
      fill: colours.$brand-one;
    }
  }

  &--secondary {
    border-color: colours.$ui-three;
    color: colours.$ui-five;
    fill: colours.$ui-five;

    &:hover {
      border-color: colours.$brand-one;
      color: colours.$brand-one;
      fill: colours.$brand-one;
    }

    &:focus {
      border-color: colours.$brand-one;
    }
  }

  &--tertiary {
    background-color: colours.$ui-one;

    &:hover {
      color: colours.$brand-one;
      fill: colours.$brand-one;
    }
  }

  &--inverse {
    border-color: white;
    color: white;
    fill: white;

    &:hover {
      border-color: colours.$brand-two;
      color: colours.$brand-two;
      fill: colours.$brand-two;
    }
  }

  &--xs {
    padding: (spacing.$xxs * 0.5) ($padding-x * 0.25);
    font-size: map-get(typography.$small, 'font-size');
  }

  &--sm {
    padding-left: $padding-x * 0.5;
    padding-right: $padding-x * 0.5;
  }

  &--lg {
    padding-left: $padding-x * 1.5;
    padding-right: $padding-x * 1.5;
  }

  .btn-group > & {
    border-radius: 0;
  }

  .btn-group > &:first-child {
    border-top-left-radius: corners.$base;
    border-bottom-left-radius: corners.$base;
  }

  .btn-group > &:last-child {
    border-top-right-radius: corners.$base;
    border-bottom-right-radius: corners.$base;
  }
}

/// -------------------
/// Button icon
/// -------------------

.btn__icn {
  &--start {
    transform: translateX(-($padding-x / 2));

    .btn--xs & {
      transform: translateX(-($padding-x / 5));
    }

    .btn--sm & {
      transform: translateX(-($padding-x / 3.5));
    }

    .btn--lg & {
      transform: translateX(-($padding-x));
    }
  }

  &--end {
    transform: translateX($padding-x / 2);

    .btn--xs & {
      transform: translateX($padding-x / 5);
    }

    .btn--sm & {
      transform: translateX($padding-x / 3.5);
    }

    .btn--lg & {
      transform: translateX($padding-x);
    }
  }
}
