@import '../../containers/Application/colors.scss';
@import './variables.scss';

$buttonTextLightColor: $blueZodiac;
$buttonTextDarkColor: $white;
$buttonTextLightColorActive: $shakespeare;
$buttonTextDarkColorActive: $white;
$buttonTextLightColorDisabled: $silver;
$buttonTextDarkColorDisabled: $stormGray;
$buttonActiveBackgroundLightColor: $wildSand;
$buttonActiveBackgroundDarkColor: $mirage;
$primaryTextColor: $white;
$primaryBackgroundColor: $shakespeare;
$successColor: $white;
$successBackgroundColor: $mantis;

.light {
    color: $buttonTextLightColor;

    &:disabled {
        color: $buttonTextLightColorDisabled;
    }

    &:not(:disabled) {
        &:hover,
        &.active {
            color: $buttonTextLightColorActive;
            background-color: $buttonActiveBackgroundLightColor;
        }
    }
}

.dark {
    color: $buttonTextDarkColor;

    &:disabled {
        color: $buttonTextDarkColorDisabled;
    }

    &:not(:disabled) {
        &:hover,
        &.active {
            color: $buttonTextDarkColorActive;
            background-color: $buttonActiveBackgroundDarkColor;
        }
    }
}

.button {
    display: block;
    min-width: 60px;
    position: relative;
    padding: 0 20px;
    border: none;
    height: 60px;
    background-color: transparent;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;

    &:disabled {
        cursor: default;
    }

    &.small {
        max-width: $smallSelectWidth;
        overflow: hidden;
        padding: 0;

        .dropdown-icon {
            position: absolute;
            left: 50%;
            bottom: 8px;
            margin-left: -6px;
            padding: 0;
        }
    }

    &.primary,
    &.primary:hover {
        color: $primaryTextColor;
        background-color: $primaryBackgroundColor;
    }

    &.success,
    &.success:hover {
        background-color: $successBackgroundColor;
        color: $successColor;
    }
}

.icon {
    vertical-align: middle;
    font-size: 20px;

    & + .label {
        padding: 0 0 0 10px;
    }

    .loader ~ & {
        visibility: hidden;
    }
}

.label {
    vertical-align: middle;

    .loader ~ & {
        visibility: hidden;
    }
}

.dropdown-icon {
    padding: 0 0 0 10px;

    .loader ~ & {
        visibility: hidden;
    }
}

.loader {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}
