// SPDX-FileCopyrightText: 2023 Icinga GmbH <https://icinga.com>
// SPDX-License-Identifier: GPL-3.0-or-later

/* Layout */

.icinga-form {
  input[type="color"] {
    padding: .25em;
    background: @low-sat-blue;
  }

  input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0;
  }

  input[type="color"]::-webkit-color-swatch {
    border-radius: 0;
    border: none;
  }

  input[type="date"] {
    width: auto;
  }

  fieldset > p.description:last-child {
    margin-top: 1em;
  }

  .control-group > p.description {
    flex-basis: 100%;
    margin: 0 1em 0 14em;
    padding: 0.5625em 0.5625em 0.5625em 0;
  }
}

.rotation-config {
  .rotation-mode {
    display: flex;
    justify-content: space-between;
    flex: 1 1 auto;
    list-style: none;
    margin: 0 1em 0 0;
    padding: 0;

    li {
      flex: 1 1 auto;
      width: 0;

      &:not(:last-child) {
        margin-right: 1em;
      }
    }

    label {
      display: flex;
      flex-direction: column;
      width: auto;

      input {
        display: none;
      }

      .mode-img {
        width: 8em;
        margin-bottom: .5em;
        outline: 3px solid @icinga-blue;
      }
    }
  }

  .control-group:not(:has(.rotation-mode)) {
    align-items: baseline;
  }

  #first-handoff-description {
    margin: 0 0 0 14em;
  }
}

.generic-source-hint {
  margin: 1em 1em 0 1em;
}

/* Style */

.icinga-controls {
  p.description {
    color: @text-color-light;
  }

  .form-controls .button-link {
    // Let a button-link in form controls look like a submit button
    .button();
  }
}

.rotation-mode {
  --img-24-7: url('../img/notifications/pictogram/24-7-dark.jpg');
  --img-partial: url("../img/notifications/pictogram/partial-dark.jpg");
  --img-multi: url("../img/notifications/pictogram/multi-dark.jpg");
}

@light-mode: {
  .rotation-mode {
    --img-24-7: url("../img/notifications/pictogram/24-7-light.jpg");
    --img-partial: url("../img/notifications/pictogram/partial-light.jpg");
    --img-multi: url("../img/notifications/pictogram/multi-light.jpg");
  }
};

.rotation-config {
  .rotation-mode {
    padding: .75em;
    border: 1px solid @gray-light;
    .rounded-corners();

    &.disabled {
      background-color: @gray-lighter;
    }

    label {
      font-weight: bold;

      * {
        font-weight: normal;
      }

      .example {
         font-style: italic;
         color: @text-color-light;
       }
    }

    .mode-img {
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      aspect-ratio: 2;

      .rounded-corners();

      &.img-24-7 {
        background-image: var(--img-24-7);
      }

      &.img-partial {
        background-image: var(--img-partial);
      }

      &.img-multi {
        background-image: var(--img-multi);
      }
    }

    input:not(:checked) + .mode-img {
      filter: grayscale(100%);
      outline: 1px solid @gray-light;
    }
  }
}

.channel-form {
  .btn-remove:disabled {
    background: @gray-light;
    color: @disabled-gray;
    border-color: transparent;
  }
}

.contact-form {
  hr {
    border: none;
    border-top: 1px solid var(--gray-light, @gray-light);
  }
}

.source-form .callout {
  margin-bottom: 1em;
}
