sparkletown/sparkle

@import "scss/constants";

.SortDropDown {
  // NOTE: this dropdown mimics the appearance of the ButtonNG default style
  // NOTE: it is needed to mitigate the effects of the global SCSS file and Bootstrap

  display: inline-block;
  margin: $spacing--xs;
  width: $button-width--normal;
  max-width: $button-width--max;

  .btn {
    width: 100%;
    padding: $spacing--md;

    border-radius: $border-radius--xl;
    border: none;
    background-image: none;

    font-weight: $font-weight--500;

    transform: translateY(0);
    transition: transform 0.4s $transition-function;

    color: var(--content--over);
    text-shadow: $text-shadow--thin;
    background-color: var(--content--over-20a) !important;
    backdrop-filter: blur(10px);

    box-shadow: 0 4px 10px var(--content--under-25a);

    &:focus {
      box-shadow: 0 0 0 2px var(--content--over-25a);
    }

    &:hover {
      background-color: var(--content--over-30a) !important;
    }
  }
}