@import '../scss/base';

.r-timepicker{
  position: relative;
  width: $width;

  input{
    cursor: pointer;
  }
}

.r-timepicker-clearable{
  .r-input-wrapper{
    &:hover{
      .ion-ios-clock-outline{
        &::before{
          content: '\f405';
        }
      }
    }
  }
}

.r-timepicker-small{
  .r-timepicker-dropdown{
    top: $minHeight;
  }  
}

.r-timepicker-dropdown{
  position: absolute;
  top: $height;
  box-shadow: $popup-shadow;
  border-right: 0;
  margin-top: 2px;
  z-index: 10;
  background-color: $color-white;
  overflow: hidden;

  .r-timepicker-col{
    float: left;
    height: $height * 5;
    overflow: hidden;
    width: $height + 20;
    position: relative;
    border-top: 1px solid $color-border;
    border-right: 1px solid $color-border;

    &:hover{
      overflow-y: scroll;
    }
  }

  .r-timepicker-col:last-child{
    border-right: 0;
  }


  ul, li{
    list-style: none;
  }

  ul{
    width: $height;
    padding-bottom: $height * 4;
  }

  li{
    text-align: left;
    padding-left: 12px;
    height: $height;
    line-height: $height;
    width: $height + 20;
  }

  .r-timepicker-item{
    cursor: pointer;

    &:hover{
      background-color: $color-white-dark;
    }
  }

  .r-timepicker-item-disabled{
    color: $color-gray;
    cursor: not-allowed;
  }

  .r-timepicker-item-active{
    background-color: $color-blue-bg;
    color: $color-white;

    &:hover{
      background-color: $color-blue-bg;
      color: $color-white;
    }
  }

  .r-timepicker-titles{
    span{
      display: inline-block;
      width: 52px;
      height: $height;
      line-height: $height;
      padding-left: 12px;
    }
  }
}