@import "~scss/variables";

.sw-tabs {
    position: relative;

    .sw-tabs__content {
        position: relative;
        display: flex;
        overflow: auto;
        scroll-behavior: smooth;

        &::-webkit-scrollbar {
            display: none;
        }

        &::before {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 2px;
            background-color: $color-gray-300;
            pointer-events: none;
        }

        .sw-tooltip--wrapper {
            display: flex;
        }
    }

    .sw-tabs__slider {
        transform-origin: top left;
        transition: 0.2s all ease-in-out;
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: $color-shopware-brand-500;

        &.has--error {
            background-color: $color-crimson-500;
        }

        &.has--warning {
            background-color: $color-pumpkin-spice-500;
        }
    }

    .sw-tabs__arrow {
        transition: 0.3s all ease-in-out;
        position: absolute;
        left: 0;
        top: 21px;
        transform: translate(0, -50%);
        border: none;
        background-color: transparent;

        &.sw-tabs__arrow--right {
            left: auto;
            right: 0;

            .sw-icon {
                padding-top: 7px;
                padding-right: 5px;
                padding-bottom: 7px;
                padding-left: 5px;
            }
        }

        &.sw-tabs__arrow--left {
            .sw-icon {
                padding-top: 7px;
                padding-right: 5px;
                padding-bottom: 7px;
                padding-left: 5px;
            }
        }

        &.sw-tabs__arrow--disabled {
            cursor: default !important;
            opacity: 0.25;
        }

        .sw-icon {
            transition: 0.3s all ease;
        }

        &:focus {
            outline: none;
        }

        &:hover {
            outline: none;
            cursor: pointer;

            .sw-icon {
                color: $color-shopware-brand-500;
            }
        }
    }

    .sw-tabs__custom-content {
        padding: 20px 0;
    }

    &.sw-tabs--vertical {
        .sw-tabs__content {
            flex-direction: column;

            .sw-tabs__slider {
                bottom: auto;
                top: 0;
                left: 2px;
            }

            &::before {
                display: none;
            }
        }

        &.sw-tabs--align-right {
            .sw-tabs__content {
                .sw-tabs-item { /* stylelint-disable-line */
                    text-align: right;
                }

                .sw-tabs__slider { /* stylelint-disable-line */
                    transform-origin: bottom right;
                    left: auto;
                    right: 0;
                    top: -2px;
                }
            }
        }
    }

    &.sw-tabs--small {
        max-width: $content-width;
        margin: 0 auto 15px;
    }

    &.sw-tabs--scrollable {
        padding: 0 20px;
    }

    &.sw-tabs--scrollbar-active {
        .sw-tabs__content {
            &::before {
                display: none;
            }
        }
    }
}
