.cds-dropdown {
    display: flex;
    position: relative;

    &__trigger {
        cursor: pointer;
    }

    &__content {
        background-color: var(--cds-color-background-default);
        border: 1px solid var(--cds-color-border-default);
        flex-direction: column;
        align-items: center;
        align-items: flex-start;
        gap: $cds-spacing-25;
        padding: $cds-spacing-100;
        border-radius: $cds-border-radius-50;
        box-sizing: content-box;
        box-shadow: $cds-elevation-medium;
        width: auto;

        display: none;
        position: absolute;
        z-index: $cds-layer-dropdown;

        &--visible {
            display: flex;
        }

        & hr {
            width: calc(100% - 16px);
        }

        &>.cds-bse-button { //This a fix when the dropdown is inside a toolbar to restore its original height
            height: $cds-size-250;
        }
    }

    //SIZE MODIFIERS
    &--small {
        .cds-dropdown__content {
            width: $cds-dropdown-s;
        }
    }

    &--medium {
        .cds-dropdown__content {
            width: $cds-dropdown-m;
        }
    }

    &--large {
        .cds-dropdown__content {
            width: $cds-dropdown-l;
        }
    }

    //POSITION MODIFIERS
    &--topcenter {
        justify-content: center;

        .cds-dropdown__content {
            bottom: calc(100% + 8px);
        }
    }

    &--topleft {
        justify-content: flex-start;

        .cds-dropdown__content {
            bottom: calc(100% + 8px);
        }
    }

    &--topright {
        justify-content: flex-end;

        .cds-dropdown__content {
            bottom: calc(100% + 8px);
        }
    }

    &--bottomcenter {
        justify-content: center;

        .cds-dropdown__content {
            top: calc(100% + 8px);
        }
    }

    &--bottomleft {
        justify-content: flex-start;

        .cds-dropdown__content {
            top: calc(100% + 8px);
        }
    }

    &--bottomright {
        justify-content: flex-end;

        .cds-dropdown__content {
            top: calc(100% + 8px);
        }
    }
}