@import '../../base/components/button.styl';

.button {
    border-radius: button--border-radius;
    font-size: button--font-size;
    min-width: button--min-width;
    padding: button--padding;

    > * {
        margin: 0 2.5px;

        &:first-child {
            margin-left: 0;
        }

        &:last-child {
            margin-right: 0;
        }
    }

    &--primary, &--default {
        background-color: button--primary--background-color;
        border: button--primary--border;
        color: button--primary--color;

        &:hover {
            border: button--primary--hover--border;
            box-shadow: button--primary--hover--box-shadow;
        }
    }

    &--secondary, &--normal {
        background-color: button--secondary--background-color;
        border: button--secondary--border;
        color: button--secondary--color;

        &:hover {
            border: button--secondary--hover--border;
            box-shadow: button--secondary--hover--box-shadow;
        }
    }

    &--call-to-action {
        background-color: button--call-to-action--background-color;
        border: button--call-to-action--border;
        color: button--call-to-action--color;

        &:hover {
            border: button--call-to-action--hover--border;
            box-shadow: button--call-to-action--hover--box-shadow;
        }
    }

    &--ghost:hover {
        // Needs to be tokenized
        color: #3399FF;
    }

    &--disabled, &:disabled, &[aria-disabled='true'] {
        background-color: button--disabled--background-color !important;
        border: button--disabled--border !important;
        box-shadow: none !important;
        color: button--disabled--color !important;
        cursor: default !important;
    }
}

.icon-button {
    // margin: -0.5rem;
    font-size: 12px;
    padding: 0.5rem;

    &--disabled, &:disabled, &[aria-disabled='true'] {
        cursor: default !important;
    }

    &--call-to-action {
        color: inherit !important;
        font-size: 18px !important;

        &:hover, &[aria-expanded='true'] {
            color: color--blue--4 !important;
        }
    }

    &--ghost:hover {
        // Needs to be tokenized
        color: #3399FF;
    }
}