gitlab-org--gitlab-foss/app/assets/stylesheets/page_bundles/oncall_schedules.scss

@import 'mixins_and_variables_and_functions';

@mixin inset-border-1-red-500($important: false) {
  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
}

.timezone-dropdown {
  .dropdown-menu {
    @include gl-w-full;
  }

  .gl-new-dropdown-item-text-primary {
    @include gl-overflow-hidden;
    @include gl-text-overflow-ellipsis;
  }
}

.modal-footer {
  @include gl-bg-gray-10;
}

.invalid-dropdown {
  .gl-dropdown-toggle {
    @include inset-border-1-red-500;

    &:hover {
      @include inset-border-1-red-500(true);
    }
  }
}

.rotations-modal {
  .gl-card {
    min-width: 75%;
  }

  &.gl-modal .modal-md {
    max-width: 640px;
  }
}

//// Copied from roadmaps.scss - adapted for on-call schedules
$header-item-height: 72px;
$item-height: 40px;
$details-cell-width: 180px;
$timeline-cell-height: 32px;
$timeline-cell-width: 180px;
$border-style: 1px solid var(--gray-100, $gray-100);
$gradient-dark-gray: rgba(0, 0, 0, 0.15);
$gradient-gray: rgba(255, 255, 255, 0.001);
$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%);
$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%);
$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%);

.schedule-shell {
  @include gl-relative;
  @include gl-h-full;
  @include gl-w-full;
  @include gl-overflow-x-auto;
  @include gl-border-gray-100;
  @include gl-border-1;
  @include gl-border-solid;
  @include gl-rounded-base;
}

.timeline-section {
  @include gl-sticky;
  @include gl-top-0;
  z-index: 20;

  .timeline-header-blank,
  .timeline-header-item {
    @include float-left;
    height: $header-item-height;
    border-bottom: $border-style;
    background-color: var(--white, $white);
  }

  .timeline-header-blank {
    @include gl-sticky;
    @include gl-top-0;
    @include gl-left-0;
    width: $details-cell-width;
    z-index: 2;
  }

  .timeline-header-item {
    &:last-of-type .item-label {
      @include gl-border-r-0;
    }

    .item-label,
    .item-sublabel .sublabel-value {
      color: var(--gray-400, $gray-400);
      @include gl-font-weight-normal;

      &.label-dark {
        color: var(--gray-900, $gray-900);
      }

      &.label-bold {
        @include gl-font-weight-bold;
      }
    }

    .item-label {
      border-right: $border-style;
      border-bottom: $border-style;
    }

    .item-sublabel {
      @include gl-relative;
      @include gl-display-flex;

      .sublabel-value {
        @include gl-flex-grow-1;
        @include gl-flex-basis-0;

        text-align: center;
        @include gl-font-base;
        padding: 2px 0;
      }
    }

    .current-day-indicator-header {
      @include gl-absolute;
      @include gl-bottom-0;
      height: $grid-size;
      width: $grid-size;
      background-color: var(--red-500, $red-500);
      @include gl-rounded-full;
      transform: translate(-50%, 50%);
    }
  }
}

.timeline-section .timeline-header-blank,
.list-section .details-cell {
  &::after {
    @include gl-h-full;
    @include gl-content-empty;
    @include gl-absolute;
    @include gl-top-0;
    right: -$grid-size;
    width: $grid-size;
    @include gl-pointer-events-none;
    background: $column-right-gradient;
  }
}

.details-cell,
.timeline-cell {
  @include float-left;
  height: $item-height;
}

.details-cell {
  @include gl-sticky;
  @include gl-left-0;
  width: $details-cell-width;
  @include gl-font-base;
  background-color: var(--white, $white);
  z-index: 10;
}

.timeline-cell {
  @include gl-relative;
  @include gl-bg-transparent;
  border-right: $border-style;

  &:last-child {
    @include gl-border-r-0;
  }

  .current-day-indicator {
    @include gl-absolute;
    top: -1px;
    width: $gl-spacing-scale-1;
    height: calc(100% + 1px);
    background-color: var(--red-500, $red-500);
    @include gl-pointer-events-none;
    transform: translateX(-50%);
  }
}