// New Timepicker
//================================================== //

.timepicker {
  + .trigger,
  + .tooltip-description + .trigger {
    margin-left: -30px;
    margin-top: 7px;
    position: absolute;
    height: 24px;
    width: 24px;
  }
}

.field-short,
.form-layout-compact .field {
  .timepicker {
    + .trigger,
    + .tooltip-description + .trigger {
      position: relative;
      margin-left: -25px;
      top: 0;
    }
  }
}

#timepicker-popup .dropdown + .icon {
  right: 8px;
  top: 3px;
}

html.is-firefox {
  .timepicker {
    + .icon,
    + .tooltip-description + .trigger {
      margin-top: 8px;
    }
  }

  .form-layout-compact {
    .timepicker {
      + .icon,
      + .tooltip-description + .trigger {
        margin-top: 9px !important;
      }
    }
  }
}

html.is-safari {
  .form-layout-compact {
    .timepicker {
      + .trigger,
      + .tooltip-description + .trigger {
        top: -1px;
      }
    }
  }
}

html[dir='rtl'] {
  .timepicker {
    + .trigger,
    + .tooltip-description + .trigger {
      margin-left: auto;
      margin-right: -32px;
      margin-top: 8px;
    }
  }

  .field-short,
  .form-layout-compact .field {
    .timepicker {
      + .trigger,
      + .tooltip-description + .trigger {
        margin-right: -23px;
        margin-top: 5px;
      }
    }
  }

  &.is-firefox {
    .field-short,
    .form-layout-compact .field {
      .timepicker {
        + .trigger,
        + .tooltip-description + .trigger {
          margin-top: 8px;
        }
      }
    }
  }
}

html:not([lang='en-US']) {
  #timepicker-popup .dropdown.period + .dropdown-wrapper .dropdown {
    width: 75px;
  }
}

// For Chinese Locale fix only
html {
  &[lang='zh-CN'],
  &[lang='zh-Hans'],
  &[lang='zh-Hant'] {
    #timepicker-popup {
      .dropdown {
        padding: 6px 30px 8px 10px;

        + .icon {
          top: 4px;
        }
      }
    }
  }
}

// Firefox Chinese Locale
html.is-firefox {
  &[lang='zh-CN'],
  &[lang='zh-Hans'],
  &[lang='zh-Hant'] {
    #timepicker-popup {
      .dropdown {
        padding: 6px 30px 8px 10px;

        + .icon {
          top: 3px;
        }
      }

      select.period + .dropdown-wrapper {
        .dropdown {
          padding-top: 6px;
        }
      }
    }
  }
}