@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.agenda-modal-container {
  .modal__body__content {
    max-width: 450px;
    margin: 0 auto;
  }

  .modal-title > div {
    display: flex;

    .category {
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: center;
      margin-left: var(--spacing-m);
      padding: var(--spacing-xs) var(--spacing-s);
      color: var(--color-light);
      border-radius: var(--radius-m);

      @include fontSize(12);
    }
  }
}

div.full-agenda-container {
  .full-agenda-header {
    justify-content: center;
  }

  .calendar-split-header > div {
    background-color: rgba(var(--color-dark-rgb), 0.02);

    @include transition(0.3s);

    &:hover {
      background-color: var(--color-light);
    }
  }

  .vuecal__cell-split {
    min-width: 136px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 120px;
      background-color: rgba(var(--color-dark-rgb), 0.06);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 300px;
      background-color: rgba(var(--color-rgb), 0.06);
    }
  }
}
