/* Copyright (C) 2019 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

.time-picker {
  background: #FFFFFF;
  border: 1px solid #bfbfbf;
  display: flex;
  flex-direction: column;
  height: 258px;
}

.time-columns {
  display: flex;
  flex-direction: row;
  height: 252px;
  margin: 1px;
}

.time-column {
  display: flex;
  flex-direction: column;
  height: 100%;
  list-style-type: none;
  margin: 2px;
  outline: none;
  overflow: scroll;
  padding: 0;
  position: relative;
  width: 52px;
}

.time-column::-webkit-scrollbar {
  display: none;
}

.time-cell {
  border: 2px solid transparent;
  border-radius: 2px;
  color: #101010;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  position: relative;
  text-align: center;
  width: 48px;
}

.time-cell:hover {
  background-color: rgba(0, 117, 255, 0.3);
}

.time-cell.selected {
  background-color: #0075FF;
  color: #FFFFFF;
  font-weight: bold;
}

.time-column:focus .time-cell.selected {
  border-color: #101010;
}

@media (forced-colors: active) {
  .time-cell {
    background-color: Window;
    color: WindowText;
    forced-color-adjust: none;
  }

  .time-cell:hover {
    background-color: Window;
    border-color: Highlight;
  }

  .time-cell.selected {
    background-color: Highlight;
    color: Window;
  }

  .time-column:focus .time-cell.selected {
    border-color: WindowText;
  }
}

@media (prefers-color-scheme: dark) {
  .time-picker {
    background: #3B3B3B;
    border: 1px solid #858585;
  }

  .time-cell {
    border: 1px solid transparent;
    color: #ffffff;
  }

  .time-cell:hover {
    background-color: #D1E6FF;
    color: #3B3B3B;
  }

  .time-column:focus .time-cell.selected,
  .time-cell.selected {
    background-color: #99C8FF;
    color: #3B3B3B;
    border: 1px solid #FFFFFF;
  }
}