@import '../../../../styles/common.scss';

.scroll-container {
  overflow: hidden;
}

.scroller {
  display: grid;
  row-gap: 1px;
  transition: transform 0.15s ease-in-out 0s;
}

.inactive-title {
  display: grid;
  font-size: 12px;
  color: var(--timepicker-inactive-title-color, $timepicker-inactive-title-color);
  text-align: center;
  align-items: center;
}

.item {
  all: unset; // remove all button styling

  display: grid;
  font-size: 18px;
  color: var(--timepicker-item-color, $timepicker-item-color);
  text-align: center;
  align-items: center;

  cursor: pointer;

  transition: background-color 0.15s ease-in-out 0s;

  visibility: hidden;

  &.active {
    visibility: visible;
    background-color: var(--timepicker-item-active-bg, $timepicker-item-active-bg);

    &.selected {
      background-color: var(--timepicker-item-selected-bg, $timepicker-item-selected-bg);
      color: white;
    }
  }

  &.selected {
    visibility: visible;

    border: 1px solid var(--timepicker-item-selected-border, $timepicker-item-selected-border);
  }

  &:hover {
    background-color: var(--timepicker-item-hover-bg, $timepicker-item-hover-bg);
  }
}

.container {
  display: grid;
  width: 70px;

  .button {
    all: unset;
    text-align: center;
    height: 20px;

    cursor: pointer;

    .icon {
      height: 12px;
    }

    svg * {
      stroke: var(--timepicker-button-stroke-color, $timepicker-button-stroke-color);
    }

    &.hidden {
      visibility: hidden;
    }
  }
}
