.dropdown {
    position: relative;
    display: inline-block;

    height: fit-content;
    border: 1px solid var(--color-accent-dark);

    padding: 0px 20px;

    &__trigger {
        position: relative;
        width: 100%;
        padding: 15px 0;
        text-align: left;

        &-dropdownLabel {
            text-transform: uppercase;
            font-family: "Jornada Sans Medium";
            font-size: 9px;
            line-height: 11px;
            color: var(--color-text);
        }

        &-dropdownTitle {
            font-family: "Jornada Sans Book";
            font-size: 16px;
            line-height: 20px;
            color: var(--color-text);
            padding-right: 25px;
        }

        &::after {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            display: block;
            width: 10px;
            height: 10px;
            background: url("/dist/images/red-arrow-down.svg") center / contain no-repeat;
            content: '';
            transition: all 0.4s;

        }

        &.active {
            &::after {
                transform: translate(0, 50%) rotate(-180deg);
            }
        }
    }

    &:hover {
        .dropdown-content {
            display: block;
        }
    }

    &-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
        z-index: 1;
    }




}