@adobe/coral-spectrum/coral-component-calendar/src/styles/index.css

Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.

/**
 * Copyright 2019 Adobe. All rights reserved.
 * This file is licensed 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 REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
._coral-Calendar {
  width: 280px;
  display: inline-block;
}
._coral-Calendar--padded {
  margin: 32px 24px;
}
._coral-Calendar-header {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-align: center;
      align-items: center;
}
._coral-Calendar-title {
  font-size: 18px;
  font-weight: bold;

  line-height: 32px;
  margin: 0;
  -ms-flex-order: 1;
      order: 1;
  -ms-flex-positive: 1;
      flex-grow: 1;


  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
._coral-Calendar ._coral-Calendar-prevMonth,
  ._coral-Calendar ._coral-Calendar-nextMonth {
    margin: 0 3px;
  }
._coral-Calendar-prevMonth {
  -ms-flex-order: 0;
      order: 0;
}
._coral-Calendar-nextMonth {
  -ms-flex-order: 2;
      order: 2;
}
._coral-Calendar-dayOfWeek {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: end;
      justify-content: flex-end;
  height: 100%;

  width: 32px;

  border-bottom: none !important;

  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: none !important;

  cursor: default;
}
._coral-Calendar-dayOfWeek[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
    letter-spacing: 0.06em;
  }
._coral-Calendar-body {
  outline: none;
}
._coral-Calendar-table {
  table-layout: fixed;

  border-collapse: collapse;
  border-spacing: 0;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
._coral-Calendar-tableCell {
  text-align: center;
  padding: 0;
  position: relative;
  box-sizing: content-box;
  height: 32px;
  width: 32px;
  padding: 4px;
}
._coral-Calendar-tableCell:focus {
    outline: 0;
  }
._coral-Calendar-date {
  position: absolute;
  display: block;
  top: 0;
  left: 0;

  box-sizing: border-box;

  height: 32px;
  width: 32px;
  margin: 4px;

  border-radius: 32px;
  border: 2px solid transparent;

  font-size: 14px;
  line-height: 28px;

  cursor: pointer;
}
._coral-Calendar-date.is-disabled {
    cursor: default;
    pointer-events: none;
  }
._coral-Calendar-date.is-outsideMonth {
    visibility: hidden;
  }
._coral-Calendar-date:before {
    content: '';
    position: absolute;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 2px solid transparent;
  }
._coral-Calendar-date.is-selected:not(.is-range-selection) {
    font-weight: 700;
  }
._coral-Calendar-date.is-selected:not(.is-range-selection):before {
      display: none;
    }
._coral-Calendar-date.is-today {
    font-weight: 700;
  }
._coral-Calendar-date.is-range-selection {
    margin: 4px 0;
    border-width: 0;
    line-height: 32px;
    border-radius: 0;
    width: 40px;
  }
._coral-Calendar-date.is-range-selection.is-range-start,
    ._coral-Calendar-date.is-range-selection.is-range-end,
    ._coral-Calendar-date.is-range-selection.is-selection-start,
    ._coral-Calendar-date.is-range-selection.is-selection-end {
      width: 36px;
    }
._coral-Calendar-date.is-range-selection.is-selection-start,
    ._coral-Calendar-date.is-range-selection.is-selection-end {
      font-weight: 700;
    }
._coral-Calendar-date.is-range-selection.is-selection-start:after, ._coral-Calendar-date.is-range-selection.is-selection-end:after {
        position: absolute;
        top: 0;

        display: block;

        height: 32px;
        width: 32px;

        border-radius: 32px;

        content: '';
      }
._coral-Calendar-date.is-range-selection.is-range-start,
    ._coral-Calendar-date.is-range-selection.is-selection-start {
      padding-right: 4px;
      margin-left: 4px;
      border-radius: 32px 0 0 32px;
    }
._coral-Calendar-date.is-range-selection.is-range-start:before,
      ._coral-Calendar-date.is-range-selection.is-range-start:after,
      ._coral-Calendar-date.is-range-selection.is-selection-start:before,
      ._coral-Calendar-date.is-range-selection.is-selection-start:after {
        left: 0;
      }
._coral-Calendar-date.is-range-selection.is-range-end,
    ._coral-Calendar-date.is-range-selection.is-selection-end {
      padding-left: 4px;
      margin-right: 4px;
      border-radius: 0 32px 32px 0;
    }
._coral-Calendar-date.is-range-selection.is-range-end:before,
      ._coral-Calendar-date.is-range-selection.is-range-end:after,
      ._coral-Calendar-date.is-range-selection.is-selection-end:before,
      ._coral-Calendar-date.is-range-selection.is-selection-end:after {
        left: auto;
        right: 0;
      }
._coral-Calendar-date.is-range-selection.is-selection-start.is-selection-end,
    ._coral-Calendar-date.is-range-selection.is-selection-start.is-range-end,
    ._coral-Calendar-date.is-range-selection.is-selection-end.is-range-start,
    ._coral-Calendar-date.is-range-selection.is-range-start.is-range-end {
      width: 32px;
      border-radius: 32px;
    }

.coral--large ._coral-Calendar {
  width: 336px;
}
.coral--large ._coral-Calendar--padded {
  margin: 32px 24px;
}
.coral--large ._coral-Calendar-title {
  font-size: 22px;

  line-height: 32px;
}
.coral--large ._coral-Calendar ._coral-Calendar-prevMonth,
  .coral--large ._coral-Calendar ._coral-Calendar-nextMonth {
    margin: 0 4px;
  }
.coral--large ._coral-Calendar-dayOfWeek {

  width: 40px;

  font-size: 13px;
  font-weight: 500;
}
.coral--large ._coral-Calendar-dayOfWeek[title] {
    letter-spacing: 0.06em;
  }
.coral--large ._coral-Calendar-tableCell {
  height: 40px;
  width: 40px;
  padding: 4px;
}
.coral--large ._coral-Calendar-date {

  height: 40px;
  width: 40px;
  margin: 4px;

  border-radius: 40px;
  border: 2px solid transparent;

  font-size: 17px;
  line-height: 36px;
}
.coral--large ._coral-Calendar-date:before {
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 2px solid transparent;
  }
.coral--large ._coral-Calendar-date.is-selected:not(.is-range-selection) {
    font-weight: 700;
  }
.coral--large ._coral-Calendar-date.is-today {
    font-weight: 700;
  }
.coral--large ._coral-Calendar-date.is-range-selection {
    margin: 4px 0;
    border-width: 0;
    line-height: 40px;
    border-radius: 0;
    width: 48px;
  }
.coral--large ._coral-Calendar-date.is-range-selection.is-range-start,
    .coral--large ._coral-Calendar-date.is-range-selection.is-range-end,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-start,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-end {
      width: 44px;
    }
.coral--large ._coral-Calendar-date.is-range-selection.is-selection-start,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-end {
      font-weight: 700;
    }
.coral--large ._coral-Calendar-date.is-range-selection.is-selection-start:after, .coral--large ._coral-Calendar-date.is-range-selection.is-selection-end:after {

        height: 40px;
        width: 40px;

        border-radius: 40px;
      }
.coral--large ._coral-Calendar-date.is-range-selection.is-range-start,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-start {
      padding-right: 4px;
      margin-left: 4px;
      border-radius: 40px 0 0 40px;
    }
.coral--large ._coral-Calendar-date.is-range-selection.is-range-end,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-end {
      padding-left: 4px;
      margin-right: 4px;
      border-radius: 0 40px 40px 0;
    }
.coral--large ._coral-Calendar-date.is-range-selection.is-selection-start.is-selection-end,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-start.is-range-end,
    .coral--large ._coral-Calendar-date.is-range-selection.is-selection-end.is-range-start,
    .coral--large ._coral-Calendar-date.is-range-selection.is-range-start.is-range-end {
      width: 40px;
      border-radius: 40px;
    }
.coral--light ._coral-Calendar-prevMonth,.coral--light ._coral-Calendar-nextMonth,.coral--light ._coral-Calendar-dayOfWeek {
  color: rgb(110, 110, 110);
}
.coral--light ._coral-Calendar-date:hover {
    color: rgb(44, 44, 44);
  }
.coral--light ._coral-Calendar-date:hover:not(.is-selection-end):not(.is-selection-start):before {
        background: rgba(44,44,44,0.06);
      }
.coral--light ._coral-Calendar-date:hover.is-selected {
      color: rgb(44, 44, 44);
    }
.coral--light ._coral-Calendar-date:hover.is-selected:not(.is-selection-end):not(.is-selection-start):before {
          background: rgba(20,115,230,0.2);
        }
.coral--light ._coral-Calendar-date:hover.is-range-selection:before {
        background: rgba(20,115,230,0.2);
      }
.coral--light ._coral-Calendar-date:active {
    background-color: rgba(44,44,44,0.1);
  }
.coral--light ._coral-Calendar-date.is-selected {
    color: rgb(44, 44, 44);
    background: rgba(20,115,230,0.1);
  }
.coral--light ._coral-Calendar-date.is-selected:not(.is-range-selection) {
    background: rgba(20,115,230,0.2);
  }
.coral--light ._coral-Calendar-date.is-today {
    color: rgb(75, 75, 75);
    border-color: rgb(75, 75, 75);
  }
.coral--light ._coral-Calendar-date.is-today:before {
      border-color: rgb(75, 75, 75);
    }
.coral--light ._coral-Calendar-date.is-today:hover.is-selected:not(.is-range-selection):before {
          background: rgba(20,115,230,0.2);
        }
.coral--light ._coral-Calendar-date.is-today.is-disabled {
      color: rgb(179, 179, 179);
      border-color: rgb(202, 202, 202);
    }
.coral--light ._coral-Calendar-date.is-today.is-disabled:before {
        border-color: rgb(202, 202, 202);
      }
.coral--light ._coral-Calendar-date.is-focused:not(.is-range-selection) {
    background: rgba(44,44,44,0.06);
    border-color: rgb(38, 128, 235);
    color: rgb(44, 44, 44);
  }
.coral--light ._coral-Calendar-date.is-focused:not(.is-range-selection).is-today {
      border-color: rgb(38, 128, 235);
    }
.coral--light ._coral-Calendar-date.is-focused:not(.is-range-selection):active,
.coral--light ._coral-Calendar-date.is-focused:not(.is-range-selection).is-selected {
      color: rgb(44, 44, 44);
      background: rgba(20,115,230,0.2);
      border-color: rgb(38, 128, 235);
    }
.coral--light ._coral-Calendar-date.is-focused.is-selected:before {
        background: rgba(20,115,230,0.2);
      }
.coral--light ._coral-Calendar-date.is-focused.is-range-selection:before {
        background: rgba(20,115,230,0.2);
      }
.coral--light ._coral-Calendar-date.is-disabled {
    color: rgb(179, 179, 179);
  }
.coral--light ._coral-Calendar-date.is-selection-start,
.coral--light ._coral-Calendar-date.is-selection-end {
    color: rgb(44, 44, 44);
  }
.coral--light ._coral-Calendar-date.is-selection-start:after,
.coral--light ._coral-Calendar-date.is-selection-end:after {
      background-color: rgba(20,115,230,0.1);
    }
.coral--light ._coral-Calendar-date.is-selection-start.is-disabled,
.coral--light ._coral-Calendar-date.is-selection-end.is-disabled {
      color: rgb(179, 179, 179);
    }
.coral--lightest ._coral-Calendar-prevMonth,.coral--lightest ._coral-Calendar-nextMonth,.coral--lightest ._coral-Calendar-dayOfWeek {
  color: rgb(116, 116, 116);
}
.coral--lightest ._coral-Calendar-date:hover {
    color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Calendar-date:hover:not(.is-selection-end):not(.is-selection-start):before {
        background: rgba(50,50,50,0.06);
      }
.coral--lightest ._coral-Calendar-date:hover.is-selected {
      color: rgb(50, 50, 50);
    }
.coral--lightest ._coral-Calendar-date:hover.is-selected:not(.is-selection-end):not(.is-selection-start):before {
          background: rgba(38,128,235,0.2);
        }
.coral--lightest ._coral-Calendar-date:hover.is-range-selection:before {
        background: rgba(38,128,235,0.2);
      }
.coral--lightest ._coral-Calendar-date:active {
    background-color: rgba(50,50,50,0.1);
  }
.coral--lightest ._coral-Calendar-date.is-selected {
    color: rgb(50, 50, 50);
    background: rgba(38,128,235,0.1);
  }
.coral--lightest ._coral-Calendar-date.is-selected:not(.is-range-selection) {
    background: rgba(38,128,235,0.2);
  }
.coral--lightest ._coral-Calendar-date.is-today {
    color: rgb(80, 80, 80);
    border-color: rgb(80, 80, 80);
  }
.coral--lightest ._coral-Calendar-date.is-today:before {
      border-color: rgb(80, 80, 80);
    }
.coral--lightest ._coral-Calendar-date.is-today:hover.is-selected:not(.is-range-selection):before {
          background: rgba(38,128,235,0.2);
        }
.coral--lightest ._coral-Calendar-date.is-today.is-disabled {
      color: rgb(188, 188, 188);
      border-color: rgb(211, 211, 211);
    }
.coral--lightest ._coral-Calendar-date.is-today.is-disabled:before {
        border-color: rgb(211, 211, 211);
      }
.coral--lightest ._coral-Calendar-date.is-focused:not(.is-range-selection) {
    background: rgba(50,50,50,0.06);
    border-color: rgb(55, 142, 240);
    color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Calendar-date.is-focused:not(.is-range-selection).is-today {
      border-color: rgb(55, 142, 240);
    }
.coral--lightest ._coral-Calendar-date.is-focused:not(.is-range-selection):active,
.coral--lightest ._coral-Calendar-date.is-focused:not(.is-range-selection).is-selected {
      color: rgb(50, 50, 50);
      background: rgba(38,128,235,0.2);
      border-color: rgb(55, 142, 240);
    }
.coral--lightest ._coral-Calendar-date.is-focused.is-selected:before {
        background: rgba(38,128,235,0.2);
      }
.coral--lightest ._coral-Calendar-date.is-focused.is-range-selection:before {
        background: rgba(38,128,235,0.2);
      }
.coral--lightest ._coral-Calendar-date.is-disabled {
    color: rgb(188, 188, 188);
  }
.coral--lightest ._coral-Calendar-date.is-selection-start,
.coral--lightest ._coral-Calendar-date.is-selection-end {
    color: rgb(50, 50, 50);
  }
.coral--lightest ._coral-Calendar-date.is-selection-start:after,
.coral--lightest ._coral-Calendar-date.is-selection-end:after {
      background-color: rgba(38,128,235,0.1);
    }
.coral--lightest ._coral-Calendar-date.is-selection-start.is-disabled,
.coral--lightest ._coral-Calendar-date.is-selection-end.is-disabled {
      color: rgb(188, 188, 188);
    }
.coral--dark ._coral-Calendar-prevMonth,.coral--dark ._coral-Calendar-nextMonth,.coral--dark ._coral-Calendar-dayOfWeek {
  color: rgb(185, 185, 185);
}
.coral--dark ._coral-Calendar-date:hover {
    color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Calendar-date:hover:not(.is-selection-end):not(.is-selection-start):before {
        background: rgba(255,255,255,0.07);
      }
.coral--dark ._coral-Calendar-date:hover.is-selected {
      color: rgb(255, 255, 255);
    }
.coral--dark ._coral-Calendar-date:hover.is-selected:not(.is-selection-end):not(.is-selection-start):before {
          background: rgba(55,142,240,0.25);
        }
.coral--dark ._coral-Calendar-date:hover.is-range-selection:before {
        background: rgba(55,142,240,0.25);
      }
.coral--dark ._coral-Calendar-date:active {
    background-color: rgba(255,255,255,0.1);
  }
.coral--dark ._coral-Calendar-date.is-selected {
    color: rgb(255, 255, 255);
    background: rgba(55,142,240,0.15);
  }
.coral--dark ._coral-Calendar-date.is-selected:not(.is-range-selection) {
    background: rgba(55,142,240,0.25);
  }
.coral--dark ._coral-Calendar-date.is-today {
    color: rgb(227, 227, 227);
    border-color: rgb(227, 227, 227);
  }
.coral--dark ._coral-Calendar-date.is-today:before {
      border-color: rgb(227, 227, 227);
    }
.coral--dark ._coral-Calendar-date.is-today:hover.is-selected:not(.is-range-selection):before {
          background: rgba(55,142,240,0.25);
        }
.coral--dark ._coral-Calendar-date.is-today.is-disabled {
      color: rgb(110, 110, 110);
      border-color: rgb(90, 90, 90);
    }
.coral--dark ._coral-Calendar-date.is-today.is-disabled:before {
        border-color: rgb(90, 90, 90);
      }
.coral--dark ._coral-Calendar-date.is-focused:not(.is-range-selection) {
    background: rgba(255,255,255,0.07);
    border-color: rgb(38, 128, 235);
    color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Calendar-date.is-focused:not(.is-range-selection).is-today {
      border-color: rgb(38, 128, 235);
    }
.coral--dark ._coral-Calendar-date.is-focused:not(.is-range-selection):active,
.coral--dark ._coral-Calendar-date.is-focused:not(.is-range-selection).is-selected {
      color: rgb(255, 255, 255);
      background: rgba(55,142,240,0.25);
      border-color: rgb(38, 128, 235);
    }
.coral--dark ._coral-Calendar-date.is-focused.is-selected:before {
        background: rgba(55,142,240,0.25);
      }
.coral--dark ._coral-Calendar-date.is-focused.is-range-selection:before {
        background: rgba(55,142,240,0.25);
      }
.coral--dark ._coral-Calendar-date.is-disabled {
    color: rgb(110, 110, 110);
  }
.coral--dark ._coral-Calendar-date.is-selection-start,
.coral--dark ._coral-Calendar-date.is-selection-end {
    color: rgb(255, 255, 255);
  }
.coral--dark ._coral-Calendar-date.is-selection-start:after,
.coral--dark ._coral-Calendar-date.is-selection-end:after {
      background-color: rgba(55,142,240,0.15);
    }
.coral--dark ._coral-Calendar-date.is-selection-start.is-disabled,
.coral--dark ._coral-Calendar-date.is-selection-end.is-disabled {
      color: rgb(110, 110, 110);
    }
.coral--darkest ._coral-Calendar-prevMonth,.coral--darkest ._coral-Calendar-nextMonth,.coral--darkest ._coral-Calendar-dayOfWeek {
  color: rgb(162, 162, 162);
}
.coral--darkest ._coral-Calendar-date:hover {
    color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Calendar-date:hover:not(.is-selection-end):not(.is-selection-start):before {
        background: rgba(239,239,239,0.08);
      }
.coral--darkest ._coral-Calendar-date:hover.is-selected {
      color: rgb(239, 239, 239);
    }
.coral--darkest ._coral-Calendar-date:hover.is-selected:not(.is-selection-end):not(.is-selection-start):before {
          background: rgba(38,128,235,0.3);
        }
.coral--darkest ._coral-Calendar-date:hover.is-range-selection:before {
        background: rgba(38,128,235,0.3);
      }
.coral--darkest ._coral-Calendar-date:active {
    background-color: rgba(239,239,239,0.15);
  }
.coral--darkest ._coral-Calendar-date.is-selected {
    color: rgb(239, 239, 239);
    background: rgba(38,128,235,0.2);
  }
.coral--darkest ._coral-Calendar-date.is-selected:not(.is-range-selection) {
    background: rgba(38,128,235,0.3);
  }
.coral--darkest ._coral-Calendar-date.is-today {
    color: rgb(200, 200, 200);
    border-color: rgb(200, 200, 200);
  }
.coral--darkest ._coral-Calendar-date.is-today:before {
      border-color: rgb(200, 200, 200);
    }
.coral--darkest ._coral-Calendar-date.is-today:hover.is-selected:not(.is-range-selection):before {
          background: rgba(38,128,235,0.3);
        }
.coral--darkest ._coral-Calendar-date.is-today.is-disabled {
      color: rgb(92, 92, 92);
      border-color: rgb(73, 73, 73);
    }
.coral--darkest ._coral-Calendar-date.is-today.is-disabled:before {
        border-color: rgb(73, 73, 73);
      }
.coral--darkest ._coral-Calendar-date.is-focused:not(.is-range-selection) {
    background: rgba(239,239,239,0.08);
    border-color: rgb(20, 115, 230);
    color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Calendar-date.is-focused:not(.is-range-selection).is-today {
      border-color: rgb(20, 115, 230);
    }
.coral--darkest ._coral-Calendar-date.is-focused:not(.is-range-selection):active,
.coral--darkest ._coral-Calendar-date.is-focused:not(.is-range-selection).is-selected {
      color: rgb(239, 239, 239);
      background: rgba(38,128,235,0.3);
      border-color: rgb(20, 115, 230);
    }
.coral--darkest ._coral-Calendar-date.is-focused.is-selected:before {
        background: rgba(38,128,235,0.3);
      }
.coral--darkest ._coral-Calendar-date.is-focused.is-range-selection:before {
        background: rgba(38,128,235,0.3);
      }
.coral--darkest ._coral-Calendar-date.is-disabled {
    color: rgb(92, 92, 92);
  }
.coral--darkest ._coral-Calendar-date.is-selection-start,
.coral--darkest ._coral-Calendar-date.is-selection-end {
    color: rgb(239, 239, 239);
  }
.coral--darkest ._coral-Calendar-date.is-selection-start:after,
.coral--darkest ._coral-Calendar-date.is-selection-end:after {
      background-color: rgba(38,128,235,0.2);
    }
.coral--darkest ._coral-Calendar-date.is-selection-start.is-disabled,
.coral--darkest ._coral-Calendar-date.is-selection-end.is-disabled {
      color: rgb(92, 92, 92);
    }

._coral-Calendar {
  padding-top: 1px;
  max-height: 312px;
  overflow: hidden;
}
._coral-Calendar.is-readOnly {
  pointer-events: none;
}
._coral-DatePicker-calendarSlidingContainer {
  display: block;
  position: relative;
  overflow: hidden;
}
._coral-Calendar-table--transit {
  position: absolute;
  top: 0;
  left: 0;
  transition: left 250ms cubic-bezier(.45, 0, .40, 1);
}
._coral-Calendar-tableCell.is-outsideMonth {
  pointer-events: none;
  opacity: 0.2;
}
._coral-Calendar-date.is-outsideMonth {
  visibility: visible;
}
.coral--large ._coral-Calendar {
  max-height: 377px;
}
.coral--light ._coral-Calendar-body:focus ._coral-Calendar-date.is-today.is-focused:before {
  border-color: rgb(38, 128, 235);
}
.coral--lightest ._coral-Calendar-body:focus ._coral-Calendar-date.is-today.is-focused:before {
  border-color: rgb(55, 142, 240);
}
.coral--dark ._coral-Calendar-body:focus ._coral-Calendar-date.is-today.is-focused:before {
  border-color: rgb(38, 128, 235);
}
.coral--darkest ._coral-Calendar-body:focus ._coral-Calendar-date.is-today.is-focused:before {
  border-color: rgb(20, 115, 230);
}
.coral--light ._coral-Calendar-date.is-selected:not(.is-range-selection) {
  background: #326ec8;
  color: #fff;
}