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

/* Layout */

.schedule-detail-controls {
  .box-shadow(0, 0, 0, 1px, @gray-lighter);
  z-index: 4; // The content may clip, this ensures the separator and dropdown is always visible

  > * {
    margin-bottom: .5em;
  }

  strong {
    font-size: 1.333em;
  }

  .button-link i.icon {
    display: inline;

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

  .schedule-controls {
    float: right;
    min-height: 2em;

    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5em;

    .suggestion-element-group .suggestion-element-icon,
    .suggestion-element-group .suggestion-element {
      height: 2em;
      line-height: 1;
    }

    .view-mode-switcher {
      margin-bottom: 0;

      label {
        min-width: 6em;
        text-align: center;
      }
    }
  }
}

.schedule-detail {
  display: flex;
  flex-direction: column;
  height: 100%;

  .from-scratch-hint {
    display: flex;
    align-items: center;
    font-size: 14/12em;

    i.icon {
      float: left;
      font-size: 1.5em;
    }

    div {
      margin: 0 auto;
    }
  }
}

.schedule-container {
  flex: 1 1 auto;
  display: flex;
  overflow: auto;

  .calendar {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    .time-grid {
      flex: 1 1 auto;
      height: 0;
    }
  }

  .timeline {
    flex: 1 1 auto;
  }
}

.timezone-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1em;

  width: fit-content;
  margin: 0 auto 1em auto;

  i.icon::before {
    margin-right: 0;
  }

  p {
    margin: 0;
  }
}

/* Design */

.schedule-detail {
  .entry.highlighted {
    outline: 2px solid var(--entry-border-color);
    outline-offset: 1px;
  }

  .sidebar .row-title.highlighted,
  .step.highlighted {
    background-color: @gray-lighter;
    border-color: @gray-light;
  }

  .sidebar .row-title.highlighted {
    margin-top: -1px; // cover the border-top area
    padding-top: 1px;
  }
}

.schedule-detail .from-scratch-hint {
  .rounded-corners();
  border: 1px solid @gray-light;
  padding: .5em;
  color: @text-color-light;
}

.timezone-warning {
  padding: .5em 1em;
  border: 1px solid @state-warning;
  border-radius: .25em;

  i.icon {
    color: @state-warning;
    font-size: 1.5em;
  }
}

.schedule-controls:has(.suggestion-element:invalid) {
  .suggestion-element-icon {
    color: @state-critical;
  }
}
