@import 'style/theming';

.dropdown {
  &__trigger {
    display: flex;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: 1rem;
    width: min-content;
  }

  &__content {
    position: absolute;
    right: 1rem;

    border-radius: 4px;

    overflow: hidden;
    z-index: 40;

    @include themed() {
      background: t(background-color);
      border: 1px solid t(border-color);
    }
  }

  &__item {
    display: flex;
    width: 100%;
    padding: .4rem 1rem;

    @include themed() {
      color: t(foreground-color);
      &:not(:last-child) {
        border-bottom: 1px solid t(border-color);
      }

      &:hover {
        background: #ddd;
      }
    }
  }
}