@use "../../../variables/index" as *;

@use "../../icons/c8y-glyphs";
@use "../../mixins/icon-base";
@use "../../mixins/vendor-prefixes";

[datepicker],
[uib-datepicker],
[uib-daypicker] {
  .btn,
  .btn-default {
    border: 0;

    @include vendor-prefixes.box-shadow(none);
  }
  table {
    outline: none;
    font-size: $font-size-small;
  }
  tbody {
    .btn,
    .btn-default {
      position: relative;
      border: 1px solid $component-background-default;
      font-size: inherit;
      .text-info {
        color: $component-brand-primary;
        font-weight: bolder;
      }
      &.active {
        background-color: $component-brand-primary;
        color: $palette-high;
        .text-info {
          color: $palette-high;
        }
      }
    }
 .btn-sm {
      padding: 5px 8px;
    }
    .uib-years .btn-default {
      padding: 5px 13px;
    }
  }
}

// Removed unused deprecated component class - verified 0 usages: .c8y-datetime-picker

.form-group.datepicker {
  position: relative;

  .form-control {
    padding-right: 28px !important;
  }
  &::after {
    @include icon-base.c8y-glyph;
    position: absolute;
    top: 50%;
    right: 5px;
    z-index: 2;
    color: $component-brand-primary;
    content: c8y-glyphs.$c8y-glyph-calendar;
    font-size: 24px;
    transform: translate(0, -50%);
    pointer-events: none;
  }
  + .timepicker {
    margin-left: 2px !important;
  }
}

.meausurements2 .timeField .btn {
  padding: 4px;
  height: 24px;
}

.meausurements2 .timeField input {
  border-radius: $component-border-radius-base!important;
}

// remove focus on calendar
.uib-datepicker-popup.dropdown-menu:focus,
.uib-datepicker-popup.dropdown-menu > *,
.uib-daypicker {
  outline: none;
}

.datepicker{
  input.form-control{
    width: 120px;
  }
  .form-group-sm &,
  &.form-group-sm {
    input.form-control{
      width: 102px;
    }
  }
  .form-group-lg &,
  &.form-group-lg {
    input.form-control{
      width: 134px;
    }
  }
  
}

[datetype="DateRange"] .datepicker{
  input.form-control{
    width: 200px;
  }
  .form-group-sm &,
  &.form-group-sm {
    input.form-control{
      width: 170px;
    }
  }
  .form-group-lg &,
  &.form-group-lg {
    input.form-control{
      width: 230px;
    }
  }
}

timepicker{
  .btn{
    padding-left: $size-8!important;
    padding-right: $size-8!important;
  }
}

.timepicker {
  input.form-control {
    width: 44px;
    .form-group-sm & {
      width: 30px;
    }
  }
  
  .form-inline & {
    .form-group {
      margin-right: 0;
    }
  }
  
  .uib-time.am-pm {
    width: 60px;
    
    .btn {
      height: 28px;
      margin-left: 2px;
      padding-top: 2px;
      padding-bottom: 2px;
      width: 100%;
    }
  }
}

// fix z-index when attached to body
body {
  > div[uib-datepicker-popup-wrap] {
    .uib-datepicker-popup.dropdown-menu {
      z-index: $zindex-navbar-fixed + 21;
    }
  }
  &.modal-open {
    > div[uib-datepicker-popup-wrap] {
      .uib-datepicker-popup.dropdown-menu {
        z-index: $zindex-modal + 1;
      }
    }
  }
}