@import "./Common.scss";

.select {
  --select--font: var(--potzblitz--font);
  --select--font-size: auto;
  --select--padding: 10px;
  --select--color-background: var(--potzblitz--color-background);
  --select--color-foreground: var(--potzblitz--color-foreground);
  --select--color-background-alternating: var(--potzblitz--color-background);

  flex-grow: 1;
  min-height: 100%;
  position: relative;
  overflow: visible !important;
  font-size: var(--select--font-size);

  @include ComponentLayout;
  
  label {
    @include LabelStyle;
  }

  .selected {
    color: var(--select--color-foreground);
    font-family: var(--select--font);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    align-self: stretch;
    cursor: pointer;
    padding: var(--select--padding);
    span {
      pointer-events: none;
    }
  }

  .options {
    color: var(--select--color-foreground);
    position: absolute;
    display: block;
    right: 10%;
    background: var(--select--color-background);
    top: 0%;
    z-index: +1;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    &.hidden {
      display: none;
    }

    .option {
      min-width: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-family: var(--select--font);
      padding: var(--select--padding);
      cursor: pointer;
      span {
        pointer-events: none;
      }
      &:nth-child(2n) {
        background: var(--select--color-background-alternating);
      }
      &:hover {
        background: black;
        color: white;
      }
    }
  }
}