@include export-module('cc-delivery-planning-overview-layout') {
  @import "../component/delivery-planning-overview-popup/style/material";
  .co-delivery-planning-overview {

    .delivery-planning-wrapper {
      pointer-events: auto;
      &.employee-view {
        pointer-events: none;
      }
    }
    .row {
      display: flex;
      flex-direction: row;
      &.date-planning {
        padding: 0 10px;
        justify-content: space-between;
        gap: 10px;
      }
    }
    .delivery-overview-wrapper {
      &.sidebar {
        .row {
          &.date-planning {
            padding: 0;
          }
        }
      }
      .co-date-planning {
        .sc-agenda {
          .agenda-header-wrapper {
            padding: 0 10px;
          }
          @media screen and (max-width: 1280px) {
            .weekday-value {
              font-size: 14px;
            }
          }
          @media screen and (max-width: 960px) {
            .weekday-value {
              font-size: 12px;
            }
          }
        }
      }
    }
    .column {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      width: 100%;
      margin: 15px 0;
      height: 100%;
      .custom-scheduled-object {
        cursor: pointer;
      }
      &.cols-7 {
        width: calc(100% / 7);
        .planning-short-line-wrapper {
          display: none;
        }
      }
      &.cols-5 {
        width: calc(100% / 5);
      }
    }
    .planning-short-line-wrapper {
      display: flex;
      flex-direction: column;
      gap: 9px;
      flex: 1;
      margin: 15px 0 20px 0;
    }
    .status-wrapper {
      gap: 15px;
    }
    co-collapsible {
      .collapsible-header {
        display: none;
      }
    }
    .planning-lines-wrapper {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .sc-agenda {
      .month-description {
        top: -30px;
      }
    }
  }

  .planning-component-wrapper {
    height: 100px;
  }

  .tile-view-modes{
    right: 10px;
    gap: 5px;
    co-icon {
      fill: black;
      cursor: pointer;
      padding: 5px;
      width: 30px;
      height: 30px;
      &.active {
        background: $color-action;
        fill: white;
      }
    }
  }
}
