@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$button-font-weight: inherit !default;
$button-corner-radius: $border-radius-sm !default;

$button-sizes-sm-padding: 0px 10px !default;
$button-sizes-md-padding: 0px 10px !default;
$button-sizes-default-padding: 0px 10px !default;
$button-sizes-lg-padding: 0px 30px !default;

$button-sizes-sm-height: 24px !default;
$button-sizes-sm-font-size: 12px !default;
$button-sizes-sm-min-width: 70px !default;
$button-sizes-md-height: 32px !default;
$button-sizes-md-font-size: inherit !default;
$button-sizes-md-min-width: 90px !default;
$button-sizes-default-height: 36px !default;
$button-sizes-default-font-size: inherit !default;
$button-sizes-default-min-width: 120px !default;
$button-sizes-lg-height: 44px !default;
$button-sizes-lg-font-size: 16px !default;
$button-sizes-lg-min-width: null !default;

$button-solid-default-bg-color: map-get($denali-brand-colors,"300") !default;
$button-solid-default-text-color: map-get($denali-grey-colors,"100") !default;
$button-solid-default-inverse-bg-color: map-get($denali-brand-colors,"300") !default;
$button-solid-default-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-solid-focus-bg-color: map-get($denali-brand-colors,"400") !default;
$button-solid-focus-text-color: map-get($denali-grey-colors,"100") !default;
$button-solid-focus-inverse-bg-color: map-get($denali-brand-colors,"400") !default;
$button-solid-focus-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-solid-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .12) !default;
$button-solid-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .5) !default;
$button-solid-disabled-inverse-bg-color: rgba(map-get($denali-grey-colors,"100"), .12) !default;
$button-solid-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"), .5) !default;

$button-ghost-default-bg-color: rgba(map-get($denali-brand-colors,"300"), .16) !default;
$button-ghost-default-text-color: map-get($denali-brand-colors,"300") !default;
$button-ghost-default-inverse-bg-color: rgba(map-get($denali-brand-colors,"300"), .16) !default;
$button-ghost-default-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-ghost-focus-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-ghost-focus-text-color: map-get($denali-brand-colors,"400") !default;
$button-ghost-focus-inverse-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-ghost-focus-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-ghost-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .12) !default;
$button-ghost-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .5) !default;
$button-ghost-disabled-inverse-bg-color: rgba(map-get($denali-grey-colors,"100"), .12) !default;
$button-ghost-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"), .5) !default;

$button-outline-default-bg-color: transparent !default;
$button-outline-default-text-color: map-get($denali-brand-colors,"300") !default;
$button-outline-default-border: solid 1px map-get($denali-brand-colors,"300") !default;
$button-outline-default-inverse-bg-color: transparent !default;
$button-outline-default-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-outline-default-inverse-border: solid 1px map-get($denali-brand-colors,"300") !default;
$button-outline-focus-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-outline-focus-text-color: map-get($denali-brand-colors,"400") !default;
$button-outline-focus-border: solid 1px map-get($denali-brand-colors,"400") !default;
$button-outline-focus-inverse-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-outline-focus-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-outline-focus-inverse-border: solid 1px map-get($denali-brand-colors,"200") !default;
$button-outline-disabled-bg-color: rgba(map-get($denali-grey-colors,"800"), .12) !default;
$button-outline-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .5) !default;
$button-outline-disabled-border: solid 1px rgba(map-get($denali-grey-colors,"800"), .5) !default;
$button-outline-disabled-inverse-bg-color: rgba(map-get($denali-grey-colors,"100"), .12) !default;
$button-outline-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"), .5) !default;
$button-outline-disabled-inverse-border: solid 1px rgba(map-get($denali-grey-colors,"100"), .5) !default;

$button-text-default-bg-color: transparent !default;
$button-text-default-text-color: map-get($denali-brand-colors,"300") !default;
$button-text-default-inverse-bg-color: transparent !default;
$button-text-default-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-text-focus-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-text-focus-text-color: map-get($denali-brand-colors,"400") !default;
$button-text-focus-inverse-bg-color: rgba(map-get($denali-brand-colors,"400"), .26) !default;
$button-text-focus-inverse-text-color: map-get($denali-grey-colors,"100") !default;
$button-text-disabled-bg-color: transparent !default;
$button-text-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), .5) !default;
$button-text-disabled-inverse-bg-color: transparent !default;
$button-text-disabled-inverse-text-color: rgba(map-get($denali-grey-colors,"100"), .5) !default;

@mixin button-default {
  .button {
    border: none;
    outline: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: $button-sizes-default-padding;
    padding-bottom: 1px;
    height: $button-sizes-default-height;
    font-size: $button-sizes-default-font-size;
    min-width: $button-sizes-default-min-width;
    border-radius: $button-corner-radius;
    transition: background 300ms;
    font-weight: $button-font-weight;

    &.is-solid {
      background: $button-solid-default-bg-color;
      color: $button-solid-default-text-color;
      &.is-inverse {
        background: $button-solid-default-inverse-bg-color;
        color: $button-solid-default-inverse-text-color;
      }
    }

    &.is-outline {
      background: $button-outline-default-bg-color;
      color: $button-outline-default-text-color;
      border: $button-outline-default-border;
      &.is-inverse {
        background: $button-outline-default-inverse-bg-color;
        color: $button-outline-default-inverse-text-color;
        border: $button-outline-default-inverse-border;
      }
    }

    &.is-ghost {
      background: $button-ghost-default-bg-color;
      color: $button-ghost-default-text-color;
      &.is-inverse {
        background: $button-ghost-default-inverse-bg-color;
        color: $button-ghost-default-inverse-text-color;
      }
    }

    &.is-text {
      background: $button-text-default-bg-color;
      color: $button-text-default-text-color;
      &.is-inverse {
        background: $button-text-default-inverse-bg-color;
        color: $button-text-default-inverse-text-color;
      }
    }

    &.is-danger {
      background: map-get($denali-status-colors,"danger");
      color: map-get($denali-grey-colors,"100");
      &.is-inverse {
        background: map-get($denali-status-colors,"danger");
        color: map-get($denali-grey-colors,"100");
      }
    }


    // Hover and Focus
    &:hover,
    &.is-active,
    &.is-active:hover,
    &:focus {
      transition: background 300ms;

      &.is-solid {
        background: $button-solid-focus-bg-color;
        color: $button-solid-focus-text-color !important;
        &.is-inverse {
          background: $button-solid-focus-inverse-bg-color;
          color: $button-solid-focus-inverse-text-color !important;
        }
      }

      &.is-outline {
        background: $button-outline-focus-bg-color;
        color: $button-outline-focus-text-color !important;
        border: $button-outline-focus-border;
        &.is-inverse {
          background: $button-outline-focus-inverse-bg-color;
          color: $button-outline-focus-inverse-text-color !important;
          border: $button-outline-focus-inverse-border;
        }
      }

      &.is-ghost {
        background: $button-ghost-focus-bg-color;
        color: $button-ghost-focus-text-color !important;
        &.is-inverse {
          background: $button-ghost-focus-inverse-bg-color;
          color: $button-ghost-focus-inverse-text-color !important;
        }
      }

      &.is-text {
        background: $button-text-focus-bg-color;
        color: $button-text-focus-text-color !important;
        &.is-inverse {
          background: $button-text-focus-inverse-bg-color;
          color: $button-text-focus-inverse-text-color !important;
        }
      }

      &.is-danger {
        background: #BB0000;
        color: map-get($denali-grey-colors,"100") !important;
        &.is-inverse {
          background: #BB0000;
          color: map-get($denali-grey-colors,"100") !important;
        }
      }
    }

    // disabled
    &.is-disabled,
    &[disabled],
    &.is-disabled:hover,
    &:hover[disabled] {
      box-shadow: none;
      cursor: not-allowed;

      &.is-solid {
        background: $button-solid-disabled-bg-color;
        color: $button-solid-disabled-text-color !important;
        &.is-inverse {
          background: $button-solid-disabled-inverse-bg-color;
          color: $button-solid-disabled-inverse-text-color !important;
        }
      }

      &.is-outline {
        background: $button-outline-disabled-bg-color;
        color: $button-outline-disabled-text-color !important;
        border: $button-outline-disabled-border;

        &.is-inverse {
          background: $button-outline-disabled-inverse-bg-color;
          color: $button-outline-disabled-inverse-text-color !important;
          border: $button-outline-disabled-inverse-border;
        }
      }

      &.is-ghost {
        background: $button-ghost-disabled-bg-color;
        color: $button-ghost-disabled-text-color !important;
        &.is-inverse {
          background: $button-ghost-disabled-inverse-bg-color;
          color: $button-ghost-disabled-inverse-text-color !important;
        }
      }

      &.is-text {
        background: $button-text-disabled-bg-color;
        color: $button-text-disabled-text-color !important;
        &.is-inverse {
          background: $button-text-disabled-inverse-bg-color;
          color: $button-text-disabled-inverse-text-color !important;
        }
      }

      &.is-danger {
        background: rgba(map-get($denali-grey-colors,"800"), 0.12);
        color: rgba(map-get($denali-grey-colors,"800") , 0.5) !important;
        &.is-inverse {
          background: rgba(map-get($denali-grey-colors,"100") , 0.12);
          color: rgba(map-get($denali-grey-colors,"100"), 0.5) !important;
        }
      }
    }

    // MODIFIERS
    // SIZES
    &.is-small {
      height: $button-sizes-sm-height;
      font-size: $button-sizes-sm-font-size;
      min-width: $button-sizes-sm-min-width;
      padding: $button-sizes-sm-padding;
    }
    &.is-medium {
      height: $button-sizes-md-height;
      font-size: $button-sizes-md-font-size;
      min-width: $button-sizes-md-min-width;
      padding: $button-sizes-md-padding;
    }
    &.is-large {
      height: $button-sizes-lg-height;
      font-size: $button-sizes-lg-font-size;
      min-width: $button-sizes-lg-min-width;
      padding: $button-sizes-lg-padding;
    }
    &.is-full {
      width: 100%;
    }

    // ICONS
    &.has-icon {
      min-width: 0px !important;
    }
    .d-icon {
      vertical-align: middle;
      font-size: 18px;
      margin: 0px 6px;
    }
  }
}

@mixin button-theme {
  .button {
    height: $button-sizes-default-height;
    font-size: $button-sizes-default-font-size;
    min-width: $button-sizes-default-min-width;
    border-radius: $button-corner-radius;
    font-weight: $button-font-weight;
    padding: $button-sizes-default-padding;

    &.is-solid {
      background: $button-solid-default-bg-color;
      color: $button-solid-default-text-color;

      &.is-inverse {
        background: $button-solid-default-inverse-bg-color;
        color: $button-solid-default-inverse-text-color;
      }
    }

    &.is-outline {
      background: $button-outline-default-bg-color;
      color: $button-outline-default-text-color;
      border: $button-outline-default-border;

      &.is-inverse {
        background: $button-outline-default-inverse-bg-color;
        color: $button-outline-default-inverse-text-color;
        border: $button-outline-default-inverse-border;
      }
    }

    &.is-ghost {
      background: $button-ghost-default-bg-color;
      color: $button-ghost-default-text-color;

      &.is-inverse {
        background: $button-ghost-default-inverse-bg-color;
        color: $button-ghost-default-inverse-text-color;
      }
    }

    &.is-text {
      background: $button-text-default-bg-color;
      color: $button-text-default-text-color;

      &.is-inverse {
        background: $button-text-default-inverse-bg-color;
        color: $button-text-default-inverse-text-color;
      }
    }

    &.is-danger {
      background: map-get($denali-status-colors,"danger");
      color: map-get($denali-grey-colors,"100");

      &.is-inverse {
        background: map-get($denali-status-colors,"danger");
        color: map-get($denali-grey-colors,"100");
      }
    }


    // Hover and Focus
    &:hover,
    &.is-active,
    &.is-active:hover,
    &:focus {

      &.is-solid {
        background: $button-solid-focus-bg-color;
        color: $button-solid-focus-text-color !important;

        &.is-inverse {
          background: $button-solid-focus-inverse-bg-color;
          color: $button-solid-focus-inverse-text-color !important;
        }
      }

      &.is-outline {
        background: $button-outline-focus-bg-color;
        color: $button-outline-focus-text-color !important;
        border: $button-outline-focus-border;

        &.is-inverse {
          background: $button-outline-focus-inverse-bg-color;
          color: $button-outline-focus-inverse-text-color !important;
          border: $button-outline-focus-inverse-border;
        }
      }

      &.is-ghost {
        background: $button-ghost-focus-bg-color;
        color: $button-ghost-focus-text-color !important;

        &.is-inverse {
          background: $button-ghost-focus-inverse-bg-color;
          color: $button-ghost-focus-inverse-text-color !important;
        }
      }

      &.is-text {
        background: $button-text-focus-bg-color;
        color: $button-text-focus-text-color !important;

        &.is-inverse {
          background: $button-text-focus-inverse-bg-color;
          color: $button-text-focus-inverse-text-color !important;
        }
      }
    }

    // disabled
    &.is-disabled,
    &[disabled],
    &.is-disabled:hover,
    &:hover[disabled] {
      &.is-solid {
        background: $button-solid-disabled-bg-color;
        color: $button-solid-disabled-text-color !important;

        &.is-inverse {
          background: $button-solid-disabled-inverse-bg-color;
          color: $button-solid-disabled-inverse-text-color !important;
        }
      }

      &.is-outline {
        background: $button-outline-disabled-bg-color;
        color: $button-outline-disabled-text-color !important;
        border: $button-outline-disabled-border;

        &.is-inverse {
          background: $button-outline-disabled-inverse-bg-color;
          color: $button-outline-disabled-inverse-text-color !important;
          border: $button-outline-disabled-inverse-border;
        }
      }

      &.is-ghost {
        background: $button-ghost-disabled-bg-color;
        color: $button-ghost-disabled-text-color !important;

        &.is-inverse {
          background: $button-ghost-disabled-inverse-bg-color;
          color: $button-ghost-disabled-inverse-text-color !important;
        }
      }

      &.is-text {
        background: $button-text-disabled-bg-color;
        color: $button-text-disabled-text-color !important;

        &.is-inverse {
          background: $button-text-disabled-inverse-bg-color;
          color: $button-text-disabled-inverse-text-color !important;
        }
      }

      &.is-danger {
        background: rgba(map-get($denali-grey-colors,"800"), 0.12);
        color: rgba(map-get($denali-grey-colors,"800"), 0.5) !important;

        &.is-inverse {
          background: rgba(map-get($denali-grey-colors,"100"), 0.12);
          color: rgba(map-get($denali-grey-colors,"100"), 0.5) !important;
        }
      }
    }

    // MODIFIERS
    // SIZES
    &.is-small {
      height: $button-sizes-sm-height;
      font-size: $button-sizes-sm-font-size;
      min-width: $button-sizes-sm-min-width;
      padding: $button-sizes-sm-padding;
    }
    &.is-medium {
      height: $button-sizes-md-height;
      font-size: $button-sizes-md-font-size;
      min-width: $button-sizes-md-min-width;
      padding: $button-sizes-md-padding;
    }
    &.is-large {
      height: $button-sizes-lg-height;
      font-size: $button-sizes-lg-font-size;
      min-width: $button-sizes-lg-min-width;
      padding: $button-sizes-lg-padding;
    }
  }
}