@import 'layout';
@import 'helpers';

.affilizz-select-option--floating {
    opacity: .5;
    z-index: 9999;
}

.affilizz-form {
    position: relative;

    .ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
        width: auto !important;
    }

    .ts-wrapper {
        .ts-control {
            transition: var(--transition) !important;

            input, ::placeholder {
                font-size: 16px !important;
                color: var(--blue-400) !important;
            }
        }

        &:not(.input-active,.disabled,.has-items) {
            .ts-control {
                background: var(--blue-0) !important;
                color: var(--blue-400) !important;
            }
        }

        &.has-items {
            ::placeholder {
                display: none;
                visibility: hidden;
            }
        }

        &.input-active {
            .ts-control {
                box-shadow: 0 0 0 0.1875rem var(--stroke-green--light) !important;
                background: var(--white);
                color: var(--blue-800);
            }
        }
    }

    .ts-wrapper.loading {
        .ts-control {
            border-radius: 4px !important;
        }
        .ts-dropdown {
            display: none !important;
        }
    }

    &__label {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 3px;

        font-weight: 400;
        font-size: $font_size_small;
        color: $black_medium;

        &__hint {
            color: $blue_medium;
            flex-shrink: 1;
        }
    }

    .ts-wrapper.multi .ts-control {
        align-items: center;
        div {
            height: 25px;
        }

        .affilizz-empty-publication-content-name {
            font-weight: normal;
            font-style: italic;
            opacity: 0.5;
        }
    }

    select, input[type="text"], .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control, .affilizz-faux-select {
        box-sizing: border-box;
        padding: 13px 8px 13px 12px;
        line-height: 1;
        width: 100%;
        max-width: 100%;
        min-height: 45px;
        font-size: $font_size_normal;
        box-shadow: none;

        background: $white_main;
        border: 1px solid $grey_light;
        border-radius: 4px;

        align-self: stretch;
        flex-grow: 0;

        &.dropdown-input {
            margin: 5px;
            max-width: calc(100% - 10px);
            padding: 8px 12px;
            min-height: 30px;
            border-color: #1dd6a1;
        }

        @include placeholder {
            color: $grey_light;
            font-size: $font_size_normal;
        }

        &:focus {
            border: 1px solid #404489;
            box-shadow: 0px 0px 0px 2px rgba(29, 214, 161, 0.5);
            border-radius: 4px;
        }


        &:disabled, &:disabled input {
            background: $grey_background !important;
            color: $grey_light !important;
            border: $grey_super_light !important;
        }

        .affilizz-option {
            padding-top: 2px;
        }

        .recent {
            background: $grey_light;
            border-radius: $border-radius;
            color: $white_main;
            padding: 3px 4px;
            font-size: 13px;
            margin-left: auto;
        }
    }

    .affilizz-faux-select {
        img {
            margin-right: 5px;
        }
    }

    &__field {
        margin: 0;

        .disabled {
            .ts-control, .ts-control input {
                opacity: 1 !important;
                background: $grey_background !important;
                color: $grey_light !important;
                border-color: $grey_super_light !important;

                &::placeholder {
                    color: $grey_light !important;
                }
            }
        }
    }
}

.affilizz-select-item {
    > img {
        width: 12px !important;
        height: 12px !important;
        padding: 0 !important;
    }
}

.affilizz-select-option, .affilizz-select-item {
    color: $black_main !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

    &.affilizz-select-option {
        font-weight: 500;
    }

    &--content-type-link {
        background: $content_type_link !important;
    }
    &--content-type-cta {
        background: $content_type_cta !important;
    }
    &--content-type-box {
        background: $content_type_box !important;
    }
    &--content-type-card {
        background: $content_type_card !important;
    }
    &--content-type-carousel {
        background: $content_type_carousel !important;
    }
    &--content-type-deal {
        background: $content_type_deal !important;
    }

    &--text {
        &::first-letter {
            text-transform: uppercase;
        }
    }
}

.affilizz-select-item {
    &--content-type-deal {
        .affilizz-select-option--subtext {
            color: #cb5735;
        }
    }
}

.ts-dropdown-content {
    max-height: 165px !important;
    .affilizz-select-option--subtext {
        color: #a9b1c8;
    }
}


.ts-dropdown-content {
    margin-bottom: 0;

    .affilizz-inline-loader {
        display: flex;
        gap: 15px;
        justify-content: flex-start;
        align-items: center;
        padding-left: 12px;
        background: #fff;
        font-size: 14px;
        color: #111453;
        line-height: 35px;

        img {
            max-width: 20px;
        }
    }
}

.ts-control {
    > .item {
        font-size: 1rem;
    }
}

#affilizz-publication-id-wrapper {
    .ts-control {
        > .item {
            display: flex;
            align-items: center;
            gap: 8px;
            max-width: calc(100% - 34px);

            > .label {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.ts-dropdown {
    // Override Tom Select default styles
    margin: 0px !important;
    width: calc(100%) !important;
    border-radius: $border-radius !important;
    box-shadow: 0px 4px 4px rgba(17, 20, 83, 0.4);

    // Custom styles
    .recent {
        background: $grey_light;
        border-radius: $border-radius;
        color: $white_main;
        padding: 2px 4px;
        font-size: 13px;
        margin-left: auto;
    }

    [data-selectable].option {
        font-size: 14px !important;
        color: var(--blue-600) !important;
        display: flex;
        align-items: center;
        padding: 8px 12px !important;
    }

    [data-selectable] .highlight {
        background: var(--background-orange--lighter) !important;
        border-radius: 4px;
        font-size: 14px;
        margin-right: 4px;
        color: var(--blue-600);
        padding: 0;
    }

    .option {
        display: flex;
        align-items: center;
        padding: 0;
        padding-left: 12px;
        border-radius: $border-radius;
        min-height: 35px;
    }

    .affilizz-select-option {
        border-radius: $border-radius;
        padding: 4px 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;

        img {
            width: 12px !important;
            height: 12px !important;
            padding: 0 !important;
        }
    }
}

#affilizz-publication-content-id-wrapper {
    .ts-dropdown {
        .option {
            gap: 8px;
        }
    }
}
#affilizz-publication-id-wrapper {
    .ts-control {
        &::before {
            content: ' ';
            background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2912_15560)'%3E%3Cg clip-path='url(%23clip1_2912_15560)'%3E%3Cpath d='M15.85 15.62L12.02 11.76C13.0689 10.5226 13.6432 8.95221 13.64 7.33002C13.6426 5.51674 12.9262 3.77634 11.6478 2.49042C10.3693 1.20449 8.63328 0.47791 6.82001 0.469971C5.00675 0.47791 3.27056 1.20449 1.99213 2.49042C0.713705 3.77634 -0.00271814 5.51674 -5.36294e-05 7.33002C-0.00271814 9.1433 0.713705 10.8836 1.99213 12.1696C3.27056 13.4555 5.00675 14.1821 6.82001 14.19C8.47818 14.1869 10.0782 13.5788 11.32 12.48L15.14 16.33C15.1877 16.3761 15.2442 16.4121 15.306 16.4362C15.3678 16.4602 15.4337 16.4717 15.4999 16.47C15.5646 16.4709 15.629 16.459 15.689 16.435C15.7491 16.411 15.8038 16.3753 15.85 16.33C15.8969 16.2835 15.934 16.2282 15.9594 16.1673C15.9848 16.1064 15.9979 16.041 15.9979 15.975C15.9979 15.909 15.9848 15.8436 15.9594 15.7827C15.934 15.7218 15.8969 15.6665 15.85 15.62ZM0.999946 7.33002C0.99728 5.78195 1.60839 4.2959 2.69929 3.19751C3.79018 2.09912 5.27197 1.47791 6.82001 1.46997C8.36806 1.47791 9.84985 2.09912 10.9407 3.19751C12.0316 4.2959 12.6426 5.78195 12.64 7.33002C12.6426 8.87808 12.0316 10.3641 10.9407 11.4625C9.84985 12.5609 8.36806 13.1821 6.82001 13.19C5.27716 13.1821 3.79983 12.565 2.70979 11.4731C1.61975 10.3812 1.0052 8.90285 0.999946 7.35999V7.33002Z' fill='%237A7DB0' style='fill:%237A7DB0;fill:color(display-p3 0.4798 0.4913 0.6917);fill-opacity:1;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            margin-right: 8px;
            width: 16px;
            height: 16px;
            display: block;
        }
    }
}
#affilizz-publication-id-ts-control {
    min-width: 35% !important;
}