@use '../consts.scss' as consts;

.dropdown {
    position: relative;
    text-wrap: nowrap;

    & > .trigger {
        // position: absolute;
        // z-index: 2;
    }

    & > .wrapper {
        position: absolute;
        z-index: 5;
        top: calc(100%);
        padding-top: consts.$gap-base;
        left: calc(consts.$gap-medium * -1);
        
        & > .content {
            display: flex;
            flex-direction: column;
            background-color: consts.$schema-background;
            padding: consts.$gap-medium;
            color: consts.$schema-text;
            
            box-shadow: 0px 0px 20px 0px #0000001A;

            row-gap: consts.$gap-base;
            
        }
    }

    &:not(:hover) > .wrapper  > .content {
       display: none; 
    }
}