@import '../../../node_modules/creative-patterns/packages/components/cs-button/src/cs-button';

.#{$namespace}button {
    $root: &;
    font-size: 1.4rem;
    border-radius: 3px;
    padding: 0.9rem 2.2rem 0.9rem 1.5rem;
    min-width: 12.2rem;
    color: $colorWhite;
    fill: currentColor;
    border-color: $colorCeruleanBlue;
    background: $colorCeruleanBlue;
    font-weight: 700;
    transition: background-color 0.15s linear, border-color 0.15s linear,
        color 0.15s linear;
    position: relative;
    text-align: center;
    display: inline-block;
    min-height: 4rem;
    box-sizing: border-box;

    @include media('>=phone-lg') {
        padding: 0.9rem 3.5rem 0.9rem 2.5rem;
    }

    &:focus,
    &:active {
        color: $colorWhite;
        border-color: $colorCeruleanBlueHover;
        background-color: $colorCeruleanBlueHover;
        box-shadow: none;
    }

    &:visited {
        color: $colorWhite;
    }

    &:focus {
        outline: none;
    }

    &--look {
        &_default {
            border: 1px solid $colorCeruleanBlue;
            color: $colorWhite;
            border-color: $colorCeruleanBlue;
            background-color: $colorCeruleanBlue;

            &:hover,
            &:active,
            &:focus {
                border: 1px solid $colorCeruleanBlueHover;
                color: $colorWhite;
                border-color: $colorCeruleanBlueHover;
                background-color: $colorCeruleanBlueHover;
            }

            &:visited {
                color: $colorWhite;
                border-color: $colorCeruleanBlue;
                background: $colorCeruleanBlue;

                &:hover,
                &:active,
                &:focus {
                    border: 1px solid $colorCeruleanBlueHover;
                    color: $colorWhite;
                    border-color: $colorCeruleanBlueHover;
                    background-color: $colorCeruleanBlueHover;
                }
            }
        }

        &_light {
            border: 1px solid $colorCeruleanBlue;
            background-color: transparent;
            color: $colorCeruleanBlue;
            border-color: $colorCeruleanBlue;

            &:hover,
            &:active,
            &:focus {
                border: 1px solid $colorCeruleanBlueHover;
                background-color: $colorCeruleanBlueHover;
                border-color: $colorCeruleanBlueHover;
                color: $colorWhite;

                #{$root}__icon {
                    fill: $colorWhite;
                }
            }

            &:visited {
                background-color: transparent;
                color: $colorCeruleanBlue;
                border-color: $colorCeruleanBlue;

                &:hover,
                &:active,
                &:focus {
                    border: 1px solid $colorCeruleanBlueHover;
                    background-color: $colorCeruleanBlueHover;
                    border-color: $colorCeruleanBlueHover;
                    color: $colorWhite;
                    /* stylelint-disable*/
                    #{$root}__icon {
                        fill: $colorWhite;
                    }
                    /* stylelint-enable*/
                }
            }

            #{$root}__icon {
                fill: $colorCeruleanBlue;
            }
        }

        &_square {
            min-width: 7rem;
        }

        &_remove {
            width: 3.1rem;
            height: 2.9rem;
            border: 1px solid $colorGray;
            border-radius: 3px;
            display: inline-block;

            &:hover {
                border: 1px solid $colorCeruleanBlueHover;

                #{$root}__remove-icon {
                    fill: $colorCeruleanBlueHover;
                }
            }
        }

        &_on-input {
            min-width: 5rem;
            height: 100%;
            position: relative;
            padding: 0;
            cursor: pointer;
            transform: skew(-18deg) translateX(1rem);
            opacity: 1 !important; /* stylelint-disable-line declaration-no-important */
            border-radius: 0;
            backface-visibility: hidden;
            border: none;

            &:hover {
                border: none;
            }

            #{$root}__icon {
                transform: skew(18deg) translate(-50%, -50%);
            }

            &[disabled] {
                &:hover {
                    background-color: $colorCeruleanBlueHover;
                    /* stylelint-disable*/
                    &:before {
                        background-color: $colorCeruleanBlueHover;
                    }
                    /* stylelint-enable*/
                }
            }
        }

        &_remove_space {
            margin-right: 1rem;
        }
    }

    &--size {
        &_300 {
            line-height: 1.2rem;
            font-size: 1.2rem;
            min-height: 3rem;
            min-width: 11rem;
            @include media('>=phone-lg') {
                padding: 0.8rem 3rem 0.8rem 2.5rem;
            }

            #{$root}__span {
                vertical-align: middle;
                vertical-align: -moz-calc(0.2rem);
            }
        }
    }

    &--type {
        &_long {
            position: relative;
            overflow: hidden;
            min-width: 17rem;
            padding-right: 6rem;
            text-indent: 2rem;

            &:after {
                content: '';
                display: block;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 200;
                width: 5rem;
                height: 100%;
                overflow: hidden;
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                background: $colorCeruleanBlueHover;
                transform: skew(-18deg) translateX(1rem);
            }

            #{$root}__icon {
                z-index: 202;
                right: 1.5rem;
            }
        }

        &_cart {
            @extend .cs-button--look_default;
            @extend .cs-button--type_long;

            &:after {
                width: 6.5rem;
            }
        }

        &_wide {
            width: 100%;
        }

        &_wide-mobile {
            @include media('<tablet') {
                width: 100%;
                max-width: 40rem;
            }
        }

        &_more-content {
            position: relative;
            left: 50%;
            margin: 2rem 0;
            padding: 1.4rem 3.5rem 1.4rem 2.5rem;
            min-width: 27rem;
            font-size: 1.5rem;
            font-weight: 700;
            color: $colorCeruleanBlue;
            background: transparent;
            border: none;
            border-radius: 4px;
            box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
            transform: translate3d(-50%, 0, 0);
            backface-visibility: hidden;
            transition: all 0.15s ease-in-out;

            &:hover,
            &:active,
            &:focus {
                color: $colorWhite;
                background: $colorCeruleanBlue;
                box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
            }

            &:visited {
                color: $colorCeruleanBlue;

                &:hover,
                &:active,
                &:focus {
                    color: $colorWhite;
                    background: $colorCeruleanBlue;
                    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
                }
            }

            #{$root}__span {
                font-weight: 400;
                vertical-align: baseline !important;

                &:before {
                    content: '(';
                }

                &:after {
                    content: ')';
                }
            }

            #{$root}__icon {
                right: 2rem;
                width: 1rem;
                height: 1.4rem;
            }
        }

        &_no-arrow {
            white-space: nowrap;
            padding-left: 2rem;
        }
    }

    &__icon {
        width: 0.7rem;
        height: 1.1rem;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        transition: fill 0.15s linear;

        &--center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        &--search {
            width: 1.6rem;
            height: 2.2rem;
        }

        &--plus {
            width: 1.1rem;
            height: 1.1rem;
            margin-left: -0.2rem;
        }

        &--cart {
            width: 2.5rem;
            height: 2.5rem;
            margin-left: -0.8rem;
        }

        &--bg {
            background-image: url('images/button-arrow-light.png');
            background-repeat: no-repeat;
            background-size: contain;

            #{$root}--look_light & {
                background-image: url('images/button-arrow-dark.png');
            }

            #{$root}--look_light:hover & {
                background-image: url('images/button-arrow-light.png');
            }
        }
    }

    &__span {
        vertical-align: middle;
    }

    &__remove-icon {
        padding: 1rem 1.1rem;
        width: 1rem;
        height: 1rem;
        fill: $colorGray;

        &:hover {
            fill: $colorCeruleanBlue;
        }
    }

    &__badge {
        vertical-align: text-bottom;
    }

    &__set {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        > #{$root} {
            margin: 0 1rem 1rem 0;

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

        &--justify {
            justify-content: space-between;
        }
    }
}