@include export-module('timepicker-layout') {
  //   timepicker layout
  .e-input-group.e-control-wrapper.e-time-wrapper.e-non-edit.e-input-focus .e-input:focus ~ .e-clear-icon,
  .e-float-input.e-control-wrapper.e-input-group.e-time-wrapper.e-non-edit.e-input-focus input:focus ~ .e-clear-icon {
    display: flex;
  }

  .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-time-wrapper {
    /* stylelint-disable property-no-vendor-prefix */
    -webkit-tap-highlight-color: transparent;

    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-normal-font-size;
      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        min-height: $timepicker-normal-input-min-height;
        min-width: $timepicker-normal-input-min-width;
      }
    }

    #{if(&, '&', '*')} .e-time-icon.e-icons.e-disabled {
      pointer-events: none;
    }

    #{if(&, '&', '*')} span {
      cursor: pointer;
    }
  }

  #{&}.e-timepicker.e-time-modal {
    background-color: $timepicker-default-overlay;
    height: 100%;
    left: 0;
    opacity: .5;
    pointer-events: auto;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  #{&}.e-timepicker.e-popup {
    border-style: solid;
    border-width: 1px;
    overflow: auto;

    #{if(&, '&', '*')} .e-content {
      position: relative;
    }

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      margin: 0;
      padding: $timepicker-list-normal-padding 0;

      #{if(&, '&', '*')} .e-list-item {
        cursor: default;
        font-size: $timepicker-list-normal-font-size;
        overflow: hidden;
        position: relative;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
        width: 100%;
      }

      #{if(&, '&', '*')} .e-list-item.e-hover {
        cursor: pointer;
      }
    }
  }

  //normal styles

  #{&}.e-timepicker.e-popup {
    #{if(&, '&', '*')} .e-list-parent.e-ul .e-list-item {
      line-height: $timepicker-list-normal-line-height;
      text-indent: $timepicker-list-normal-text-indent;
    }
  }

  //bigger styles
  .e-bigger .e-time-wrapper,
  #{if(&, '&', '*')}.e-bigger.e-time-wrapper,
  #{if(&, '&', '*')}.e-bigger .e-control-wrapper .e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-bigger.e-time-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-bigger-font-size;
      @if $skin-name == 'material' or $skin-name == 'material-dark' {
        min-height: $timepicker-bigger-input-min-height;
        min-width: $timepicker-bigger-input-min-width;
      }
    }
  }

  .e-bigger #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-bigger#{&}.e-timepicker.e-popup {

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      padding: $timepicker-list-bigger-padding 0;

      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-bigger-font-size;
        line-height: $timepicker-list-bigger-line-height;
        text-indent: $timepicker-list-bigger-text-indent;
      }
    }
  }

  //mouse small size
  .e-small #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-small#{&}.e-timepicker.e-popup {

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-small-font-size;
        line-height: $timepicker-list-small-line-height;
        text-indent: $timepicker-list-small-text-indent;
      }
    }
  }

  .e-small .e-time-wrapper,
  #{if(&, '&', '*')}.e-small.e-time-wrapper,
  #{if(&, '&', '*')}.e-small .e-control-wrapper.e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.e-time-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-small-font-size;
    }
  }

  //mouse small size
  .e-small.e-bigger #{&}.e-timepicker.e-popup,
  #{if(&, '&', '*')}.e-small.e-bigger#{&}.e-timepicker.e-popup {

    #{if(&, '&', '*')} .e-list-parent.e-ul {
      #{if(&, '&', '*')} .e-list-item {
        font-size: $timepicker-list-bigger-small-font-size;
        line-height: $timepicker-list-bigger-small-line-height;
        text-indent: $timepicker-list-bigger-small-text-indent;
      }
    }
  }

  .e-small.e-bigger .e-time-wrapper,
  #{if(&, '&', '*')}.e-small.e-bigger.e-time-wrapper,
  #{if(&, '&', '*')}.e-small.bigger .e-control-wrapper.e-time-wrapper,
  #{if(&, '&', '*')}.e-control-wrapper.e-small.bigger.e-time-wrapper {

    #{if(&, '&', '*')} .e-time-icon.e-icons {
      font-size: $timepicker-icon-bigger-small-font-size;
    }
  }

  .e-content-placeholder.e-timepicker.e-placeholder-timepicker {
    background-size: 250px 33px;
    min-height: 33px;
  }

  .e-bigger .e-content-placeholder.e-timepicker.e-placeholder-timepicker,
  .e-bigger.e-content-placeholder.e-timepicker.e-placeholder-timepicker {
    background-size: 250px 40px;
    min-height: 40px;
  }
}

/* stylelint-disable */

.e-time-overflow {
  overflow: hidden;
}

.e-timepicker-mob-popup-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  max-height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;

  .e-timepicker.e-popup.e-lib.e-control.e-popup-open {
    left: 0 !important;
    position: relative;
    top: 0 !important;
  }
}

/* stylelint-enable */