/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */

/**********************************************************************************************************************
                                   used colors (todo: move to base.less eventually)
***********************************************************************************************************************/

@disabled-gray: #9a9a9a;
@low-sat-blue: #dae3e6;
@low-sat-blue-dark: #becbcf;
@icinga-blue-light: #a5c4cd;
@icinga-blue-dark: #0081a6;

/**********************************************************************************************************************
                                             general form layout
***********************************************************************************************************************/

form:not(.inline):not([role="search"]) {
  max-width: 70em;
  width: 80%;
}

.form-controls {
  display: flex;
  margin-left: 16em;
  justify-content: flex-end;
}



.control-group {
  display: flex;
  margin: 0 -.5em;
  align-items: flex-start;

  > * {
    margin: .5em;
  }
}

/**********************************************************************************************************************
                                             minimal form layout
***********************************************************************************************************************/

#layout.minimal-layout,
#layout.twocols:not(.wide-layout) {
  form:not(.inline) {
    width: 100%;

    .control-label-group {
      text-align: left;
      width: 100%;
      padding-bottom: 0;
      padding-left: 0;
      margin-bottom: 0;
    }
  }

  .toggle-switch ~ .control-info:before {
    margin-left: 0;
  }

  .control-info {
    opacity: .5;
  }

  .errors > li {
    margin-left: .5em;
  }
}

/**********************************************************************************************************************
                                                 label styles
***********************************************************************************************************************/

.control-group .control-label-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  padding: .5625em .5625em .5625em 0;
  max-height: 2.5em;
  text-align: right;
  width: 15em;
}

.control-info {
  line-height: 2.5em;
  margin-right: 1em;
  opacity: .6;
  margin-left: 0;

  &:before {
    margin-right: 0;
  }
}

.toggle-switch ~ .control-info {
  position: relative;
  margin-left: .5em;
}

.spinner {
  line-height: 2.5em;

  &:before {
    margin-left: .5em;
    opacity: 0.4;
  }
}

form.inline .control-group .spinner {
  line-height: 1.5;
  margin: 0 auto;
  padding: 0 .5em;
}

select ~ .spinner:before {
  margin-left: -3.5em;
}

/**********************************************************************************************************************
                                               general input styles
***********************************************************************************************************************/

form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="datetime-local"],
form textarea,
form select {
  background-color: @low-sat-blue;
  flex: 1;
}

form input:not([type="checkbox"]),
form .toggle-switch,
form button,
form select,
form textarea,
form button,
form .toggle-switch,
form input {
  border: none;
  .rounded-corners(.25em);
  .appearance(none);
}

.control-group input:not([type="checkbox"]),
.control-group .toggle-switch,
.control-group button,
.control-group select,
.control-group textarea,
.form-controls button,
.form-controls .toggle-switch,
.form-controls input {
  font-size: inherit;
  padding: @vertical-padding;
}

.control-group .toggle-switch,
.form-controls .toggle-switch {
  margin: 1em .5em;
}

form select:not([multiple]) {
  padding-right: 1.5625em;
  /* compensate inconsistent select height calculations */
  line-height: 1em;
  height: 2.25em;
}

/* Remove native dropdown arrow in IE10+ */
form select::-ms-expand {
  display: none;
  opacity: 0
}

form select:not([multiple]) {
  background-image: url(../img/select-icon.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}

form select {
  /* Prevent selects with long option values from exceeding the container */
  width: 0
}

form.inline select {
  width: auto
}

/**********************************************************************************************************************
                                             specific input styles
***********************************************************************************************************************/

.link-button {
  .action-link();
  // Reset defaults
  background: none;
  border: none;
  display: inline-block;
  padding: 0;

  text-align: left;
}

.control-group .spinner {
  margin: .5em 0;
}

.form-controls {
  .spinner {
    order: -1;
  }

  .btn-primary {
    order: 99;
  }
}

/**********************************************************************************************************************
                                               button styles
***********************************************************************************************************************/

.form-controls input[type="submit"],
.form-controls input[type="submit"].btn-confirm {
  .button();
}

.form-controls input[type="submit"].btn-remove {
  .button(@body-bg-color, @color-critical, darken(@color-critical, 10%));
}

.form-controls input[type="submit"].btn-cancel {
  .button(@body-bg-color, @gray, @black);
}

/**********************************************************************************************************************
                                               IPL toggle styles
***********************************************************************************************************************/

/* The switch - the box around the slider */
.toggle-switch {
  cursor: pointer;
  position: relative;
  display: inline-block;
  height: 1.5em;
  width: 2.625em;
}

/* Hide default HTML checkbox */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.toggle-slider {
  position: absolute;
  left: 0;
  top: 0;

  display: inline-block;
  background:  @low-sat-blue;
  border: 1px solid @low-sat-blue;
  box-sizing: content-box;
  border-radius: 1em;
  height: 4/3em;
  width: 8/3em;
  vertical-align: middle;
}

.toggle-slider:before {
  position: absolute;
  top: 0;
  left: 0;

  background: @text-color-inverted;
  border-radius: 1em;
  border: 1px solid @low-sat-blue;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 4/3em;
  margin-left: 0;
  width: 4/3em;

  @transition: left .2s ease, margin .2s ease;
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

input:checked + .toggle-slider {
  background-color: @icinga-blue;
  border: 1px solid @icinga-blue;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
}

input:checked + .toggle-slider:before {
  border: 1px solid @icinga-blue;
  left: 100%;
  margin-left: -4/3em;
}

/**********************************************************************************************************************
                                                 disabled inputs
***********************************************************************************************************************/

.toggle-switch.disabled {
  cursor: default;

  & > .toggle-slider {
    background-color: @gray-light;
    border-color: @gray-light;

    &:before {
      background-color: @gray-lighter;
      border-color: @gray-light;
    }
  }
}

.control-group.disabled .control-label-group {
  color: @disabled-gray;
}

.control-group input[disabled],
.control-group select[disabled] {
  background: @gray-lighter;
  border: none;
}

/**********************************************************************************************************************
                                          errors and additional information
***********************************************************************************************************************/

.form-notifications,
.form-description {
  border-radius: .25em;
  display: flex;
  list-style: none;
  align-items: center;
  margin: 0 0 1em 0;
  padding: .25em .5em;

  ul {
    list-style: none;
    margin: 0;
    padding: 0 .5em;
  }

  li {
    list-style: none;
  }

  & .form-notification-icon,
  & .form-description-icon {
    font-size: 2em;
    margin-left: .25em;
    opacity: .4;
    align-self: flex-start;
  }
}

.form-notifications {
  background-color: fade(@color-ok, 20%);
}

.form-description {
  background-color: fade(@gray, 5%);
}

.errors {
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;

  & > li {
    margin: -0.5em 0 0.5em 16.5em;
    color: #f56;
  }
}

.form-element-error {
  color: @color-critical;
  margin: 0 0 0.5em 15em;
  padding: 0.5625em;
  width: 100%;
}

.control-group {
  flex-wrap: wrap;
}

.form-info {
  color: @text-color-light;
  font-size: @font-size-small;
  list-style: none;
  padding-left: 0;
}

/**********************************************************************************************************************
                                                placeholder styles
***********************************************************************************************************************/

input:-moz-placeholder { // FF 18-
  color: @gray;
  opacity: 1;
}

input::-moz-placeholder { // FF 19+
  color: @gray;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: @gray;
}

input::-webkit-input-placeholder {
  color: @gray;
}


/**********************************************************************************************************************
                                             specific form styles
***********************************************************************************************************************/


.limiter-control-form > * {
  display: inline-block;
  margin-right: 0.25em;
}

.search.inline {
  display: inline-block;
}

.sort-control > * {
  display: inline-block;
}