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

.event-rule-config {
  @connectorHeight: .5em;
  @connectorColor: @gray-lighter;

  // Style

  .connector-line {
    background-color: @connectorColor;
  }

  .dynamic-list:not(.empty, .escalations) {
    padding: .5em;
    border: 1px solid @connectorColor;
    .rounded-corners();
  }

  .add-button,
  .filter-button,
  .remove-button {
    .event-rule-button();

    &.animated.active {
      .fa::before {
        .animate(spin 2s infinite linear);

        // fa spinner
        content: '\f110';
      }
    }
  }

  .remove-button-disabled {
    .event-rule-button(true);
  }

  .escalation-condition,
  .escalation-recipient {
    > :first-child,
    > :first-child[type="hidden"] + * {
      .rounded-corners(.25em);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    > :last-child {
      .rounded-corners(.25em);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    > :not(:first-child, :first-child[type="hidden"] + *, :last-child) {
      .rounded-corners(0);

      * {
        // nested inputs as well
        .rounded-corners(0);
      }
    }
  }

  // Layout

  display: flex;

  .connector-line {
    height: @connectorHeight;
    margin-top: 2.75em;
  }

  > .connector-line {
    flex: 1 1 auto;
    min-width: 1em;
  }

  #object-filter-controls {
    width: 20em;
    height: fit-content;
  }

  .set-wrapper:has(.dynamic-list.empty .add-button),
  > #object-filter-controls {
    padding: .75em 0;
  }

  .dynamic-list.empty .add-button,
  > #object-filter-controls > .button-wrapper .filter-button {
    align-self: flex-start;
    flex-direction: column;
    padding: 1.25em 0.5em;

    > span {
      overflow: hidden;
      word-break: break-word;
      .line-clamp(2);
    }
  }

  .dynamic-list.empty > .add-button-wrapper,
  > #object-filter-controls > .button-wrapper {
    display: flex;

    &::before,
    &::after {
      content: "";
      flex: 1 1 auto;
      min-width: 1.25em;
      height: @connectorHeight;
      margin-top: 2em;
      background-color: @connectorColor;
    }

    .add-button,
    .filter-button {
      flex: 0;
      min-width: 8em;
    }
  }

  > #object-filter-controls > .button-wrapper {
    min-width: 12em;
  }

  > .escalations {
    flex: 15 1 auto;
  }

  .escalations {
    display: grid;
    grid-template-columns: min-content minmax(1em, 4em) 1fr minmax(1em, 4em) 1fr;

    .escalation {
      display: contents;
    }

    .escalation > div:first-child {
      .vertical-line();

      .remove-button {
        margin-top: 2em;
      }
    }

    // The first escalation isn't connected to anything on top of it
    .escalation:first-child > div:first-child::before {
      top: 2.75em;
    }

    > .add-button-wrapper {
      .vertical-line();

      .add-button {
        margin-top: 2em;
      }
    }

    .escalation .dynamic-list {
      position: relative;
      margin-bottom: 1em;

      .dynamic-item {
        display: grid;
        align-items: baseline;
        margin-bottom: .5em;
        gap: 1px;

        &.escalation-condition {
          grid-template-columns: minmax(8em, 1fr) 0fr 4em minmax(8em, 1fr) min-content;

          .age-inputs {
            display: flex;
            gap: 1px;

            > * {
              flex: 1 1 auto;
              width: 0;
            }
          }
        }

        &.escalation-recipient {
          grid-template-columns: minmax(8em, 1fr) minmax(8em, 1fr) min-content;
        }

        .remove-button,
        .remove-button-disabled {
          height: 100%;
        }
      }

      .add-button {
        width: 100%;

        > .icon {
          margin: 0 auto;
        }
      }
    }
  }

  select:not([multiple]) + .spinner::before {
    // ipl-web's Icon applies a min-width by default. Since the spinner element is part of a flex container,
    // it will be larger than necessary, covering the select's dropdown arrow. This ensures it doesn't.
    width: 1em;
  }

  .vertical-line() {
    position: relative;

    &::before {
      position: absolute;
      z-index: -1;
      @halfedConnectorHeight: @connectorHeight / 2;
      inset: 0 ~"calc(50% - @{halfedConnectorHeight})" 0 ~"calc(50% - @{halfedConnectorHeight})";

      content: "";
      width: @connectorHeight;

      background-color: @connectorColor;
    }
  }
}

#layout.twocols:not(.wide-layout) {
  .event-rule-config {
    #object-filter-controls {
      width: fit-content;
    }

    .dynamic-list.empty .add-button,
    > #object-filter-controls > .button-wrapper .filter-button {
      padding: .5em 1em;
      margin-top: .75em;
    }

    > #object-filter-controls > .button-wrapper {
      min-width: fit-content;
    }
  }
}

// Other stuff

.event-rule-and-save-forms {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5em;

  .event-rule-form {
    display: flex;
    gap: .5em;

    h2 {
      margin: 0;
    }
  }

  #save-config {
    display: flex;
    flex-direction: row-reverse;
    gap: .5em;
    max-height: 2em;

    .btn-remove {
      .button(@body-bg-color, @color-critical, @color-critical-accentuated);
    }
  }
}

.event-rule-filter > .filter-name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5625em;
  margin-bottom: .5em;

  input {
    flex-grow: 1;
    max-width: 35em;
    .rounded-corners();
  }
}
