@import 'page_bundles/mixins_and_variables_and_functions';

@include media-breakpoint-down(sm) {
  .epics-other-filters {
    .epics-sort-btn i {
      position: absolute;
      top: 11px;
      right: 6px;
    }

    .btn-sort-direction {
      flex: 0 1 auto;
    }
  }
}

.is-ghost {
  opacity: 0.3;
  pointer-events: none;
}

.epic-discussion-separator {
  border-color: var(--gray-100, $gray-100);
}

.epic-sidebar {
  .help-icon,
  .date-warning-icon {
    &:hover {
      cursor: pointer;
    }
  }

  .help-icon {
    color: var(--gray-500, $gray-500);
  }

  .btn-sidebar-action.btn-link {
    line-height: $gl-font-size;
  }

  .btn-sidebar-date-remove {
    height: $gl-font-size;
    line-height: $gl-btn-horz-padding;
  }

  .date-warning-icon {
    color: var(--orange-500, $orange-500);
    margin-top: -1px;
  }

  .is-option-selected {
    > span {
      color: var(--gray-500, $gray-500);
      font-weight: $gl-font-weight-bold;
    }
  }
}

.epic-tabs-content {
  .roadmap-container {
    min-height: 600px;

    .roadmap-shell {
      border: 1px solid var(--border-color, $border-color);
      border-top: 0;
    }

    .empty-state {
      margin-top: 0;
    }
  }
}

@include media-breakpoint-down(xs) {
  .epic-page-container {
    .detail-page-header {
      display: flex;
    }

    .detail-page-header-actions {
      margin-top: 0;
    }
  }
}

.new-epic-form .md-area.gfm-form {
  @include gl-rounded-base;
  @include gl-border-none;
  @include gl-inset-border-1-gray-200;

  &.is-focused {
    @include gl-focus($gl-border-size-1, $gray-900);
    @include gl-text-gray-900;
  }

  .markdown-area::placeholder {
    @include gl-text-gray-200;
  }
}

.new-epic-form .labels-select-wrapper.is-embedded {
  width: $gl-dropdown-width;

  .labels-select-dropdown-contents {
    min-height: 335px;
  }
}
