@import "../variables";
@import "../mixins";

/* stylelint-disable max-nesting-depth, no-descending-specificity */

.Button {
    @include action-control;
    @include control;
    @include inline-middle;

    cursor: pointer;
    padding-bottom: 0;
    padding-top: 0;
    user-select: none;
    white-space: nowrap;

    & + & {
        .ButtonsGroup & {
            margin-left: $offset_main;
        }
    }

    &-type-default {
        @include control-default;
    }

    &-type-primary {
        @include control-primary;
    }

    &-type-danger {
        @include control-default;

        &,
        &:hover,
        &:visited,
        &:active,
        &-active {
            color: $color_danger;
        }
    }

    &-type-text,
    &-type-text-inline,
    &-type-text-secondary {
        &,
        &:hover,
        &:active,
        &-active,
        &:focus {
            background: none;
            border: 0 none;
            box-shadow: none;
        }
    }

    &-type-text,
    &-type-text-inline {
        &,
        &:hover,
        &:active,
        &-active,
        &:focus {
            color: $color_action_main;
        }
    }

    &-type-text-secondary {
        color: $color_text_label;

        &:hover,
        &:active,
        &-active,
        &:focus {
            color: $color_dark_text_auxilliary;
        }
    }

    &-type-text-inline {
        height: auto;
        line-height: $line_height_default;
        padding: 0;
    }

    &-active {
        &,
        &:hover,
        &:focus {
            @include control-default-active;

            cursor: default;
        }
    }
}

.Button-hidden {
    display: none;
}

.Button-disabled,
.Button[disabled],
.Button:disabled {
    &,
    &:hover,
    &:active,
    &.Button-active,
    &:focus {

        cursor: default;
        pointer-events: none;

        &.Button-type-default {
            @include control-default-disabled;
        }

        &.Button-type-primary {
            @include control-primary-disabled;
        }

        &.Button-type-danger {
            @include control-default-disabled;
            color: $color_danger_unactive;
        }
        &.Button-type-text,
        &.Button-type-text-inline,
        &.Button-type-text-secondary {
            color: $color_text_label;
            text-decoration: none;
        }
    }
}

/* stylelint-enable max-nesting-depth */

.Button-icon-wrapper,
.Button-content {
    color: inherit;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.Button-content {
    .Button-type-text:hover &,
    .Button-type-text-inline:hover &,
    .Button-type-text-secondary:hover &,
    .Button-type-text:focus &,
    .Button-type-text-inline:focus &,
    .Button-type-text-secondary:focus & {
        text-decoration: underline;
    }

    .Button-type-text:active &,
    .Button-type-text-inline:active &,
    .Button-type-text-secondary:active & {
        text-decoration: none;
    }
}

.Button-icon-wrapper {
    .Button-size-small & {
        line-height: 0;
    }
}

/* stylelint-disable max-nesting-depth */
.Button-icon-wrapper {

    .Button-type-text &,
    .Button-type-text-inline &,
    .Button-type-text-secondary & {
        top: -.1em;
    }

    &-right {
        margin-left: $offset-main * .5;

        .Button-size-large & {
            margin-left: $offset-main;
        }

        .Button-size-large.Button-type-text-inline & {
            margin-left: $offset-main * .5;
        }
    }

    &-left {
        margin-right: $offset-main * .5;

        .Button-size-large & {
            margin-right: $offset-main;
        }

        .Button-size-large.Button-type-text-inline & {
            margin-right: $offset-main * .5;
        }
    }

    .Button-only-icon & {
        margin: 0;
    }
}
/* stylelint-enable no-descending-specificity, max-nesting-depth */