.dropdown {
    display: inline-block;
    max-width: 368px;

    .btn-dropdown {
        height: 36px;
        padding: spacing(n) spacing(n) spacing(n) spacing(xxs);
        margin: spacing(n);
        min-width: 80px;

        &:active {
            box-shadow: none;
        }

        .caret {
            border: none;
            width: auto;
            height: auto;
            line-height: 1;
            font-size: 12px;
            padding: spacing(xxs) spacing(xxs, -1);
            margin-left: spacing(xxxs);

            &::before {
                @include glyph(chevron-down-2);
                vertical-align: bottom;
            }
        }
    }
    .dropdown-menu {
        box-shadow: none;
        border: none;
        width: 100%;
        padding: spacing(n);
        top: spacing(sm, -2px);

        li {
            padding: spacing(n);
            margin: spacing(n);

            a {
                @include type(t7);
                line-height: spacing(md, -4px);
                height: spacing(md, -4px);
                padding: spacing(n) spacing(n) spacing(n) spacing(xxs);
                text-decoration: none;
                cursor: pointer;
            }
        }
    }
}

//
// Colors
//
.dropdown {
    // default and theme-light
    &,
    &.theme-default,
    &.theme-on-img-light,
    &.theme-light {
        .btn-dropdown {
            background-color: $color-vivid-mid-alt;
            border-color: $color-vivid-low;

            .caret {
                color: $color-vivid-low;
            }
            &:focus,
            &:hover {
                background-color: $color-dim-mid;
                border-color: $color-vivid-mid;

                .caret {
                    color: $color-vivid-mid;
                }
            }
            &:active {
                background-color: $color-neutral-low;
                border-color: $color-vivid-high;

                .caret{
                    color: $color-vivid-high;
                }
            }
            &.disabled {
                color: $color-type-disabled;
                background-color: $color-neutral-low-alt;
                border-color: $color-neutral-low;

                .caret {
                    color: $color-neutral-low;
                }
            }
        }
        &.open {
            .btn-dropdown {
                background-color: $color-neutral-low;
                border-color: $color-vivid-high;

                .caret{
                    color: $color-vivid-high;
                }
            }
        }
        // stylize dropdown menus
        .dropdown-menu {
            background-color: $color-bg-light-vivid-mid;

            li {
                a {
                   color: $color-type-primary;

                    &.disabled {
                        color: $color-type-disabled;
                    }
                }
                &.active a,
                a:hover,
                a:focus {
                    color: $color-vivid-high-alt;
                    background-color: $color-accent-vivid-high;

                    &.disabled {
                        color: $color-type-disabled-alt;
                    }
                }
            }
        }
    }
    // Theme-alt, and theme-on-img-dark
    &.theme-alt,
    &.theme-on-img-dark {
        .btn-dropdown {
            color: $color-type-primary-alt;
            background-color: $color-vivid-mid;
            border-color: $color-vivid-low-alt;

            .caret {
                color: $color-vivid-low-alt;
            }
            &:focus,
            &:hover {
                background-color: $color-dim-mid-alt;
                border-color: $color-vivid-mid-alt;

                .caret {
                    color: $color-vivid-mid-alt;
                }
            }
            &:active {
                background-color: $color-neutral-mid-alt;
                border-color: $color-vivid-high-alt;

                .caret {
                    color: $color-vivid-high-alt;
                }
            }
            &.disabled {
                color: $color-type-disabled-alt;
                background-color: $color-neutral-low;
                border-color: $color-neutral-low-alt;

                .caret {
                    color: $color-neutral-low-alt;
                }
            }
        }
        &.open {
            .btn-dropdown{
                background-color: $color-neutral-mid-alt;
                border-color: $color-vivid-high-alt;

                .caret {
                    color: $color-vivid-high-alt;
                }
            }
        }
        // stylize dropdown menus
        .dropdown-menu {
            background-color: $color-bg-dark-vivid-mid;

            li {
                a {
                   color: $color-type-primary-alt;

                   &.disabled {
                        color: $color-neutral-mid-alt;
                   }
                }
            }
        }
    }
    &.theme-dark {
        .btn-dropdown {
            background-color: $color-vivid-low-alt;
            border-color: $color-vivid-high-alt;

            .caret {
                color: $color-vivid-low;
            }
            &:focus,
            &:hover {
                background-color: $color-vivid-mid-alt;
                border-color: $color-vivid-high-alt;

                .caret {
                    color: $color-vivid-mid;
                }
            }
            &:active {
                background-color: $color-vivid-high-alt;
                border-color: $color-vivid-high-alt;

                .caret {
                    color: $color-vivid-mid;
                }
            }
            &.disabled {
                color: $color-type-disabled-alt;
                background-color: $color-neutral-low-alt;
                border-color: $color-neutral-low-alt;

                .caret {
                    color: $color-type-disabled-alt;
                }
            }
        }
        &.open {
            .btn-dropdown {
                background-color: $color-vivid-high-alt;
                border-color: $color-vivid-high-alt;

                .caret {
                    color: $color-vivid-mid;
                }
            }
        }
        // stylize dropdown menus
        .dropdown-menu {
            background-color: $color-bg-light-vivid-mid;

            li {

                a {
                   color: $color-type-primary;

                   &.disabled {
                        color: $color-type-disabled;
                   }
                }
                &.active a,
                a:hover,
                a:focus  {
                    color: $color-vivid-high-alt;
                    background-color: $color-vivid-high;

                   &.disabled {
                        color: $color-type-disabled-alt;
                   }
                }
            }
        }
    }
}