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

$namespace: ".button";

#{$namespace} {
    &_item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        min-height: $button_height;
        margin: 0;
        padding: 0;
        line-height: $genericLineHeight;
        @include border-radius($button_border-radius);

        &--small {
            @include text-6;
            @include border-radius($button_border-radius--small);
            line-height: 16px;
            min-height: $button_height--small;
        }
        &--large {
            @include text-3;
            min-height: $button_height--large;
        }
        &--primary {
            @include button-primary;
        }
        &--primary#{&}--active {
            @include button-primary-active;
        }
        &--secondary {
            @include button-secondary;
        }
        &--secondary#{&}--active {
            @include button-secondary-active;
        }
        &--emphasis {
            @include button-emphasis;
        }
        &--white {
            @include button-white;
        }
        &--card {
            background-color: $white;
            color: $deep-gray;
            box-shadow: 0px 2px 3px 1px darker($percent), 0px 0px 2px 0.1px darker($percent * 2);
            border: 0;
            
            &:focus, &:hover {
                background: $faint-gray;
            }
            
            @include focus-outline;
        }

        &--emphasis-outline {
            @include button-emphasis-outline;

            & > .button_text {
                width: auto;
            }
        }

        &--emphasis#{&}--active {
            @include button-emphasis-active;
        }
        &--emphasisAlt {
            @include button-emphasisAlt;
        }
        &--emphasisAlt#{&}--active {
            @include button-emphasisAlt-active;
        }
        &--disabled {
            @include button-disabled;

            //Text that are part of an inactive user interface component have no contrast requirement.
            opacity: 0.5;
        }

        &--selected {
            @include button-selected;
        }

        &--wide {
            min-width: 192px;
        }

        &--wide#{&}--large {
            min-width: 250px;
        }

        &--icon {
            @include button-link($gray-71, $dark-gray, $gray-71, $dark-gray);
        }

        &--icon#{&}--white {
            @include button-link($white);
        }

        &--link {
            @include button-link($secondary-color, $secondary-color-hover);
        }

        &--link#{&}--primary {
            @include button-link($link-text-color);

            &:hover, &focus {
                text-decoration: underline;
            }
        }
    }

    &_text {
        width: 100%;
        padding: $button_padding;
        pointer-events: none;

        #{$namespace}_item--small & {
            padding: $button_padding--small;
        }

        #{$namespace}_item--large & {
            padding-right: 40px;
            padding-left: 40px;
        }

        #{$namespace}_item--condensed & {
            padding: 5px 9px;
        }

        #{$namespace}_item--link & {
            padding: 0;
        }
    }
}
