.#{$pui}dropdown {
    @include sizes;

    border-width: 1px;
    border-style: solid;
    border-color: $color-border-gray;
    border-radius: $border-radius;
    background-color: #fff;

    box-shadow: $shadow-default;

    ul {
        padding: $dropdown-list-padding;
    }

    li {
        display: block;
    }

    a {
        @include transitions;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        padding: $dropdown-list-item-padding;

        border-radius: calc(#{$border-radius} / 2);

        transition-property: color, background-color;

        &:not(disabled):hover {
            color: $color-primary;
        }
    }

    li.is-active a {
        color: $color-primary;
        background-color: rgba($color-primary, $color-lt-ammount);
    }

    li[disabled] a {
        cursor: not-allowed;
        color: $color-black;
        opacity: 0.5;
    }
}

.#{$pui}dropdown-wrapper {
    display: inline-block;
    width: 100%;

    .#{$pui}dropdow-content {
        position: fixed;
        z-index: 999;
        
        &.is-right {
            transform: translateX(-100%);
        }
    }

    .#{$pui}dropdown-trigger {
        * {
            user-select: none;
        }
    }
}