@use 'theme-variables' as *;

@include export-module('calendar-layout') {

  .sf-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: $calendar-font-weight-style;
    padding: $calendar-normal-header-padding;
    position: relative;
    .sf-radius-full {
      border-radius: $calendar-header-border-radius;
    }

    .sf-calendar-title {
      font-weight: $calendar-title-text-font-weight;
      font-size: $calendar-title-text-font-size;
      line-height: $calendar-title-text-line-height;
      letter-spacing: $calendar-title-text-letter-spacing;
    }
  }

  .sf-calendar-decade .sf-calendar-title {
    cursor: $calendar-cursor-default-style;
  }

  .sf-calendar-icon {
    display: flex;
    align-items: center;
    gap: $calendar-header-title-padding;
  }

  .sf-calendar-content-table {
    padding: $calendar-table-padding;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: $calendar-full-width;
  }

  .sf-calendar .sf-cell {
    cursor: pointer;
    text-align: center;
  }

  .sf-calendar-month .sf-cell {
    height: $calendar-normal-month-view-height;
    padding: $calendar-normal-month-cell-padding;
  }

  .sf-calendar .sf-day {
    height: $calendar-normal-month-view-height;
    line-height: $calendar-normal-month-view-height;
    width: $calendar-normal-month-view-width;
    display: $calendar-inline-block-style;
    font-size: $calendar-date-font-size;
  }

  .sf-calendar-year .sf-day,
  .sf-calendar-decade .sf-day {
    display: inline-block;
    font-size: $calendar-date-font-size;
    font-weight: $calendar-yeardecade-font-weight;
    height: $calendar-normal-year-decade-height-inside;
    line-height: $calendar-normal-year-decade-height-inside;
    width: $calendar-normal-year-decade-width;
    white-space: nowrap;
  }

  .sf-calendar-footer {
    display: $calendar-display-style;
    flex-direction: row;
    justify-content: flex-end;
    padding: $calendar-footer-container-padding;
  }

  .sf-calendar {
    border-radius: $calendar-div-border-radius;
    display: $calendar-block-style;
    overflow: auto;
    user-select: $calendar-none-style;
    min-width:  $calendar-min-width;
    width: $calendar-normal-width;

    .sf-week-header {
      cursor: $calendar-cursor-default-style;
      font-size: $calendar-title-font-size;
      font-weight: $calendar-normal-day-header-font-weight;
      text-align: center;
      height: $calendar-normal-day-header-height;
      text-transform: $calendar-normal-day-header-text;
      border-bottom: 0;
    }

    .sf-calendar-toolbar {
      overflow-wrap: break-word;
      padding: $calendar-toolbar-spacing;
      font-size: $calendar-toolbar-font-size;
      font-weight: $calendar-toolbar-font-weight;
      min-width: $calendar-orientation-header-min-width;
    }

    &.sf-orientation {
      display: flex;
      min-width: $calendar-min-width;
      width: $calendar-orientation-width;
    }

    &.sf-week-number {
      width: $calendar-week-number-width;
    }
  }

  .sf-calendar-header-lg {
    max-width: $calendar-lg-day-header-format-max-width;
    min-width: $calendar-lg-day-header-format-min-width;
      
    &.sf-week-number {
      min-width: $calendar-lg-day-header-format-min-weekwidth;
    }

    &.sf-orientation {
      min-width: $calendar-lg-day-header-format-min-orientation;
      &.sf-week-number {
        min-width: $calendar-lg-day-header-format-min-orientation-week;
      }
    }
  }
}