$presets-border: var(
    --wds-calendar-panel-presets-border-width,
    var(--wds-border-width-100, 1px)
  )
  solid
  var(
    --wds-calendar-panel-presets-border-fill,
    var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))
  );
$footer-border: var(
    --wds-calendar-panel-footer-border-width,
    var(--wds-border-width-100, 1px)
  )
  solid
  var(
    --wds-calendar-panel-footer-border-fill,
    var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))
  );

.calendar-panel {
  background-color: var(
    --wds-color-fill-surface-default,
    var(--wsr-color-D80, #FFFFFF)
  );
  border-radius: 8px;
  max-width: 775px;
  display: inline-block;

  &__calendar-with-presets {
    display: flex;
  }

  &__presets {
    width: 174px;
    height: 342px;
    box-sizing: border-box;
    padding: 16px 8px 0;
    border-right: #{$presets-border};
  }

  &__calendar *:focus {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none !important;
  }

  &__footer {
    border-top: #{$footer-border};
  }
}