@import './variables';

.time-picker {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07);
    background-color: $react-timepicker-color-white;
    border: 1px solid transparent;
    border-radius: 3px;
    width: 318px;
    .info {
        display: flex;
        padding: 15px;
        width: 100%;
        height: 63px;
        align-items: center;
        span {
            border: 1px solid $react-timepicker-color-border-light;
            padding: 10px;
            line-height: 0.78;
            cursor: pointer;
        }
    }
    .info:first-child {
        border-bottom: 1px solid $react-timepicker-color-border-light;
        font-size: 18px;
        justify-content: center;
    }
    .info:last-child {
        justify-content: flex-end;
        border-top: 1px solid $react-timepicker-color-border-light;
    }
}

.time-picker-container {
    height: 333px;
    background-color: $react-timepicker-color-white;
    display: flex;
    text-align: center;
    .columns {
        width: 50%;
        overflow-y: scroll;
        margin: 0;
        padding:0;
        .id {
            color: gray;
        }
        li {
            list-style: none;
            padding: 15px;
        }
        li:hover:not(.id):not(.disabled) {
            background-color: $react-timepicker-time-hover;
            color: $react-timepicker-color-white;
            cursor: pointer;
        }
        li.active {
            background-color: $react-timepicker-time-active;
            color: $react-timepicker-color-white;
        }
        li.disabled {
            color: #cacccd;
            cursor: default;
        }
    }
    .columns:first-child {
        border-right: 1px solid $react-timepicker-color-border-light;
    }
}

@media only screen and (max-width : 767px) and (orientation: landscape) {
  .time-picker-container{
    height:180px;
  }
  .time-picker .info{
    height:50px
  }
}