/* ==========================================================================
   Availability
   ========================================================================== */

.picker__day.booked {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPElEQVQYV2NkIADOnj37nxGfGpACY2NjRpyKYApAhmBVhKwAqyJ0BRiKsClAUYRLAVwRPgVgRYQUgBQBAKv8I3BUT3C3AAAAAElFTkSuQmCC) repeat;
  background-color: #e5e5e5;
  border-color: transparent;
}

.picker__day--stock {
  position: relative;
  padding: .3125em 50% .3125em 0;
}

.picker__day--highlighted {
  border-color: transparent;
}

/* ==========================================================================
Availability display mode: Colored circle / Colored bar
========================================================================== */

.picker__day--status {
  position: relative;
}

.wceb-stock-status {
  box-sizing: border-box;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  position: absolute;
  bottom: 2px;
  right: 2px;
}

.wceb-stock-bar {
  box-sizing: border-box;
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  width: 5px;
}

.wceb-stock-status.in_stock, .wceb-stock-bar.in_stock {
  background: var(--wceb-in-stock);
}

.wceb-stock-status.low, .wceb-stock-bar.low {
  background: var(--wceb-low-stock);
}

/* ==========================================================================
Availability display mode: Background
========================================================================== */

.picker__day--background:not(.picker__day--selected):not(.picker__day--highlighted).in_stock:not(:hover) {
  background: var(--wceb-in-stock);
  border-color: var(--wceb-in-stock);
  color: var(--wceb-in-stock-darker);
}

.picker__day--background:not(.picker__day--selected):not(.picker__day--highlighted).low:not(:hover) {
  background: var(--wceb-low-stock);
  border-color: var(--wceb-low-stock);
  color: var(--wceb-low-stock-darker);
}

/* ==========================================================================
Availability display mode: Amount / Amount and colors
========================================================================== */

.wceb-stock-amount {
    box-sizing: border-box;
    position: absolute;
    top: -1px;
    bottom: -1px;
    right: -1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    width: 50%;
    font-size: 0.8em;
    background: #e5e5e5;
    color: #4e4e4e;
}

.wceb-stock-amount abbr {
    border: 0;
    font-size: .62em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.wceb-stock-amount.in_stock {
  background: var(--wceb-in-stock);
  color: var(--wceb-in-stock-darker);
}

.wceb-stock-amount.low {
  background: var(--wceb-low-stock);
  color: var(--wceb-low-stock-darker);
}

.picker__day--highlighted .wceb-stock-amount,
.picker__day--infocus:hover .wceb-stock-amount,
.picker__day--outfocus:hover .wceb-stock-amount {
  color: var(--wceb-text);
  background: var(--wceb-accent-medium);
}

.wceb_picker_wrap .picker__day--inrange .wceb-stock-amount {
  color: var(--wceb-bg);
  background: var(--wceb-accent-darker);
}

/* ==========================================================================
Hide on mobile
========================================================================== */

@media (max-width: 480px) {

  .wceb-stock-amount, .wceb-stock-status {
    display: none;
  }

  .picker__day--stock {
    padding: .3125em 0;
  }
  
}