$itemHover: #dcdfe4;
$itemSelected: #ecedf0;
$textLink: #136ae5;
$textSelected: #182c4e;

:host {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid #c5c5c5;
  border-radius: 3px;

  > button {
    cursor: pointer;
    user-select: none;

    margin: 0;
    padding: 7px 10px;

    color: $textLink;
    text-align: left;

    background-color: transparent;
    border: none;
    border-radius: 3px;

    &.selected {
      font-weight: 600;
      color: $textSelected;
      background-color: $itemSelected;

      &:hover {
        background-color: $itemHover;
      }
    }

    &:hover {
      background-color: $itemHover;
    }
  }

  .date-range {
    display: flex;
    flex-flow: row nowrap;
    padding: 7px 10px;

    .delimitter::after {
      content: '-';
      padding: 0 6px;
    }

    .date-input {
      width: 84px;
      padding: 4px 8px;

      background: transparent;
      border: 1px solid #c5c5c5;
      border-radius: 3px;

      transition: border-color 0.2s ease;
    }

    .date-input:focus-visible {
      border-color: gray;
      outline: none;
    }
  }
}