/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
.dashboard-component-header {
  width: 100%;
  font-weight: @font-weight-bold;
  padding: 16px 0;
  color: @almost-black;
}

.dashboard--editing {
  .dashboard-grid {
    .dashboard-component-header {
      &:after {
        border: 1px dashed transparent;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: @z-index-chart;
        pointer-events: none;
      }

      &:hover:after {
        border: 1px dashed @indicator-color;
        z-index: @z-index-chart--dragging;
      }
    }
  }

  .dragdroppable-row .dashboard-component-header {
    cursor: move;
  }

  .header-style-option {
    font-weight: @font-weight-bold;
    color: @almost-black;
  }
}

.dashboard-header .dashboard-component-header {
  font-weight: @font-weight-light;
  width: auto;
}

.dashboard--editing

/* note: sizes should be a multiple of the 8px grid unit so that rows in the grid align */
.header-small {
  font-size: @font-size-l;
}

.header-medium {
  font-size: @font-size-xl;
}

.header-large {
  font-size: @font-size-xxl;
}

.background--white .dashboard-component-header,
.dashboard-component-header.background--white,
.dashboard-component-tabs .dashboard-component-header,
.dashboard-component-tabs .dashboard-component-divider {
  padding-left: 16px;
  padding-right: 16px;
}

/*
 * grids add margin between items, so don't double pad within columns
 * we'll not worry about double padding on top as it can serve as a visual separator
 */
.grid-column > :not(:only-child):not(:last-child) .dashboard-component-header {
  margin-bottom: -16px;
}
