@import "~scss/variables";

$sw-select-option-active-color-background: lighten($color-shopware-brand-500, 40%);
$sw-select-option-active-color-text: $color-shopware-brand-500;
$sw-select-option-color-border: $color-gray-300;
$sw-select-option-color-icon: darken($color-gray-100, 20%);
$sw-select-option-transition-item-icon: all ease-in-out 0.15s;
$sw-select-option-disabled-color-background: $color-gray-100;
$sw-select-option-disabled-color-text: darken($color-gray-300, 15%);

.sw-select-option {
    padding: 12px 15px;
    border-bottom: 1px solid $sw-select-option-color-border;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .sw-select-option__result-item-text {
        word-break: break-word;
        display: flex;
    }

    .sw-icon {
        color: $sw-select-option-color-icon;
        flex-grow: 0;
        flex-shrink: 0;
        margin-left: 10px;
    }

    &.is--active {
        background: $sw-select-option-active-color-background;
        color: $sw-select-option-active-color-text;
    }

    &.is--disabled {
        color: $sw-select-option-disabled-color-text;

        &.is--active {
            background: $sw-select-option-disabled-color-background;
            color: $sw-select-option-disabled-color-text;
            cursor: default;
        }
    }

    &:last-child {
        border-bottom: 0 none;
    }

    // Vue.js transitions
    .sw-select-option-appear-enter-active,
    .sw-select-option-appear-leave-active {
        transition: $sw-select-option-transition-item-icon;
        transform: translateY(0);
    }

    .sw-select-option-appear-enter,
    .sw-select-option-appear-leave-to {
        opacity: 0;
        transform: translateY(-15px);
    }
}
