#squid-style-container {
  .tw-font-geistvariable {
    font-feature-settings:
      "ss01" on,
      "ss03" on;
  }

  .tw-timeline-gradient-mask {
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black calc(50% - 15px),
      black calc(50% + 15px),
      transparent 100%
    );
  }

  input.date-input-no-icon::-webkit-inner-spin-button,
  input.date-input-no-icon::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  /* boost badge colour swapping */
  .boost-badge {
    --boost-badge-badge-color: var(--st-color-royal-500);
    --boost-badge-text-color: var(--st-color-grey-900);
    --boost-badge-shadow-color: #e4fe53;
    [data-squid-theme-type="dark"] & {
      --boost-badge-badge-color: #e4fe53;
      --boost-badge-shadow-color: var(--st-color-royal-500);
    }
  }

  /* styling for React DayPicker */
  :root {
    .rdp {
      margin: 0 !important;
      --rdp-accent-color: var(--st-color-material-light-thin);
      --rdp-background-color: transparent;
    }
    .rdp-month,
    .rdp-table {
      width: 100%;
    }
    .rdp-table {
      border-spacing: 2px;
    }
    .rdp-nav {
      width: 28.5%;
      button {
        width: 50%;
      }
    }
    .rdp-head_cell,
    .rdp-cell {
      flex-grow: 1;
      width: auto;
      height: auto;
      @apply tw-text-caption tw-font-caption;
    }
    .rdp-head_cell {
      @apply tw-h-squid-xl;
    }
    .rdp-day {
      width: 100%;
    }
    .rdp-caption_label {
      font-weight: normal;
    }
    .rdp-day,
    .rdp-day_range_end.rdp-day_range_start {
      @apply tw-rounded-squid-xxs !important;
    }
    .day-picker-from .rdp-day_range_start,
    .day-picker-to .rdp-day_range_end {
      @apply tw-bg-royal-500 tw-text-white;
    }
    .rdp-button:hover:not([disabled]):not(.rdp-nav_button) {
      border: 2px solid var(--st-color-royal-500);
    }
  }

  /* Storybook */
  .sb-show-main.sb-main-centered #storybook-root {
    padding: 0;
    margin: 0;
    width: 100%;
    @apply mobile-lg:tw-m-auto mobile-lg:tw-w-auto;
  }
}