.gra-dropdown {
  position: relative;

  &[open] .gra-dropdown-btn {
    box-shadow: none;

    &::before {
      display: block;
      position: fixed;
      z-index: 90;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: $transparent;
      content: " ";
      cursor: default;
    }

    &::after {
      transform: rotate(-135deg) translate(-2px, -2px);
    }

    &:hover {
      opacity: 1;
    }
  }

  &:not([open]) .gra-dropdown-btn {
    opacity: 1;
  }

  &:not([open]) .gra-dropdown-list {
    display: block;
    opacity: 1;
  }
}

.gra-dropdown-list {
  position: absolute;
  z-index: 99;
  top: 105%;
  left: 0;
  height: auto;
  background-color: $color-background;
  @include moder($modes) {
    border: 0;
    background-color: mode("colorCardBg");
  }

  &-item {
    min-width: 8rem;
    font-size: $font-size-s;
    padding-block: $space-s;
  }
}

.gra-dropdown-wrapper {
  display: inline-block;

  &::-webkit-details-marker {
    display: none;
  }

  &:focus {
    outline: 0;
  }
}

.gra-dropdown-btn {
  margin: 0;

  &::after {
    @include caret-icon(45deg, -2px, -2px, $color-border);
    display: inline-block;
    margin-left: 12px;
    content: "";
    transition: $transition-default;
    @include moder($modes) {
      border-color: mode("colorIcon");
    }
  }
}