@import (reference) '../../theme/index.less';

.dropdownContainer {
  position: relative;
}
.buttonReset {
  appearance: none;
  background: transparent;
  border: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dropdownButton {
  padding: 5px;
  border-radius: @border-radius-base;
  font-size: 1em;
  &:focus {
    outline: 1px solid @sbm-blue;
    box-shadow: 0 0 4px 0 fade(@sbm-blue, 75%), 0 0 0 0.1em fade(@sbm-blue, 2%);
  }
  svg {
    margin-left: 5px;
  }
  &.disabled {
    pointer-events: none;
  }
}
.dropdownMenu {
  min-width: 175px;
  max-height: 300px;
  overflow-y: scroll;
  background-color: @white;
  font-weight: normal;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  border: 1px solid @gray-02;
  border-radius: 3px;
  position: absolute;
  z-index: 1000;

  :first-child {
    margin-top: 0px !important;
  }

  a,
  [role='menuitem'],
  button {
    text-decoration: none;
    color: @gray-06;
    padding: 10px;
    margin-top: 1px;
    font-family: @font-family-sans-serif;
    cursor: pointer;
    display: block;
    &:hover {
      background-color: @gray-01;
    }
    &:focus {
      .sbmFocusStyle;
      border: none;
      outline: 1px solid @sbm-blue;
      background-color: @gray-01;
    }
    &:disabled {
      opacity: 0.7;
      background-color: @gray-01;
    }
  }
  button {
    all: unset;
    padding: 10px;
    background: transparent;
    outline: none;
    appearance: none;
  }
}
.openLeft {
  right: 0;
}