// Dependencies from other packages --------------------------------------------
@import '~sui-settings/src/settings';

@if $is-theme == false {
  @import '~sui-reset/src/reset';
  @import '~sui-typography/src/typography';
  @import '~sui-main/src/main';
}

/*
Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non.

Styleguide Button-1
*/

/*
Button Primary

Use class `.Button--primary` to create a button using `<a>` (outside forms) or `<button>` (only inside forms).
<br>
Also add one of the following classes to give it format:
<br>
`.Button--primary` for a primary action style<br>

Markup:
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary">Anchor Button primary default</a>
@@
<!-- Buttons (actions) -->
<button class="Button Button--primary">Button primary default</button>
<button class="Button Button--primary is-disabled" disabled>Button primary default disabled</button>


Styleguide Button-1.1
*/

.Button {
  appearance: none;
  background-color: $button-bg-base;
  border-color: transparent;
  border-radius: $b-radius-base;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  color: $button-c-base;
  cursor: pointer;
  display: inline-block;
  font-family: $ff-base;
  font-size: $fz-base;
  font-weight: normal;
  height: $button-h-base;
  line-height: $button-lh-base;
  overflow: visible;
  padding-bottom: 0;
  padding-left: $gap-medium;
  padding-right: $gap-medium;
  padding-top: 0;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
}

.Button--primary {
  background-color: $button-bg-primary;
  color: $button-c-primary;

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

  &.is-disabled,
  &[disabled] {
    background-color: $button-bg-primary-disabled;
    border-color: $button-b-primary-disabled;
    color: $button-c-primary-disabled;
    cursor: default;
  }

  &.is-active {
    background-color: $button-bg-primary-active;
    color: $button-c-primary-active;
  }
}

/*
Button Secondary

Use class `.Button--secondary` to create a button using `<a>` (outside forms) or `<button>` (only inside forms).
<br>

Markup:
<!-- Anchors (links) -->
<a href="#" class="Button Button--secondary">Anchor Button secondary</a>
@@
<!-- Buttons (actions) -->
<button class="Button Button--secondary">Button secondary</button>
<button class="Button Button--secondary is-disabled" disabled>Button secondary disabled</button>


Styleguide Button-1.2
*/
.Button--secondary {
  background-color: $button-bg-secondary;
  color: $button-c-secondary;

  &:hover {
    background-color: $button-bg-secondary-hover;
    color: $button-c-secondary-hover;
  }

  &.is-disabled,
  &[disabled] {
    background-color: $button-bg-secondary-disabled;
    border-color: $button-b-secondary-disabled;
    color: $button-c-secondary-disabled;
    cursor: default;
  }

  &.is-active {
    background-color: $button-bg-secondary-active;
    color: $button-c-secondary-active;
  }
}
/*
Button Small

Use class `.Button--small` to create a button with small size.
<br>
`.Button--small` for a primary action style<br>

Markup:
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--small">Anchor Button medium</a>
@@
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--small">Button medium</button>
<button class="Button Button--primary Button--small is-disabled" disabled>Button medium disabled</button>


Styleguide Button-1.3
*/
.Button--small {
  font-size: $fz-small;
  height: $button-h-small;
  line-height: $button-lh-small;
  padding-bottom: 0;
  padding-left: $gap-base;
  padding-right: $gap-base;
  padding-top: 0;
}

/*
Button Large

Use class `.Button--large` to create a button with large size.

Markup:
<!-- Anchors (links) -->
<a href="#" class="Button Button--primary Button--large">Anchor Button large</a>
@@
<!-- Buttons (actions) -->
<button class="Button Button--primary Button--large">Button primary default</button>
<button class="Button Button--primary Button--large is-disabled" disabled>Button large disabled</button>


Styleguide Button-1.4
*/
.Button--large {
  font-size: $fz-large;
  height: $button-h-large;
  line-height: $button-lh-large;
  padding-bottom: 0;
  padding-left: $gap-medium;
  padding-right: $gap-medium;
  padding-top: 0;
}

/*
Button-group

Use class `.Button-group` to create a button group structure.
@@
Use class `.Button--secondary` (or the class for an specific button) for buttons inside buttons group.

Markup:
<div class="Button-group">
  <button class="Button Button--secondary" type="button">year</button>
  <button class="Button Button--secondary" type="button">month</button>
  <button class="Button Button--secondary" type="button">hour</button>
</div>

Styleguide Button-1.5
*/

/*
Button-group active

Use class `.is-active` to highlight the selected button.

Markup:
<div class="Button-group">
  <button class="Button Button--secondary is-active" type="button">year</button>
  <button class="Button Button--secondary" type="button">month</button>
  <button class="Button Button--secondary" type="button">hour</button>
</div>

Styleguide Button-1.6
*/

/*
Button-group disabled

Use class `.is-disabled` to mark a button as disabled.

Markup:
<div class="Button-group">
  <button class="Button Button--secondary is-disabled" type="button">year</button>
  <button class="Button Button--secondary is-disabled" type="button">month</button>
  <button class="Button Button--secondary is-disabled" type="button">hour</button>
</div>

Styleguide Button-1.7
*/

.Button-group {
  display: flex;

  .Button {
    flex: 0 0 auto;
    padding-left: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;

    &:first-of-type {
      border-top-left-radius: $b-radius-base;
      border-bottom-left-radius: $b-radius-base;

      &.is-disabled {
        border-left-color: $button-b-secondary-disabled;
        border-left-width: $button-bw-secondary-disabled;
      }
    }

    &:last-of-type {
      border-top-right-radius: $b-radius-base;
      border-bottom-right-radius: $b-radius-base;

      &.is-disabled {
        border-right-color: $button-b-secondary-disabled;
        border-right-width: $button-bw-secondary-disabled;
      }
    }

    &.is-disabled {
      color: $button-c-group-disabled;
    }

    &::before {
      content: '';
      display: inline-block;
      float: left;
      height: $button-h-divider;
      margin-top: $button-mt-divider;
      padding-left: $gap-medium;
      border-left-color: $button-b-divider;
      border-left-width: 1px;
      border-left-style: solid;
    }

    &.is-disabled::before {
      border-left-color: $button-b-secondary-disabled;
    }

    &.is-active + .Button,
    &:hover + .Button:not(.is-disabled),
    &:first-of-type {
      &::before {
        border-left-color: transparent;
      }
    }
  }

  &--justified {
    .Button {
      flex-grow: 1;
    }
  }

  &--centered {
    justify-content: center;
  }

  button { // fix iOS buttons separation */
    margin: 0;
  }
}

/*
Button group justified

Use class `.Button-group-justified` to display `.Button-group` full width buttons.


Markup:
<div class="Button-group Button-group--justified">
  <button class="Button Button--secondary" type="button">year</button>
  <button class="Button Button--secondary" type="button">month</button>
  <button class="Button Button--secondary" type="button">hour</button>
</div>

Styleguide Button-1.8
*/

/*
Button group centered

Use class `.Button-group--centered` to display `.Button-group` centered.


Markup:
<div class="Button-group Button-group--centered">
  <button class="Button Button--secondary" type="button">year</button>
  <button class="Button Button--secondary" type="button">month</button>
  <button class="Button Button--secondary" type="button">hour</button>
</div>

Styleguide Button-1.9
*/