@use "sb-element/core/transitioning";
@use "sb-element/core/display";
@use "sb-element/core/border";
/*****************************************************************************
Calendar-Date / Stlye
******************************************************************************/

// ROOT
.sb-calendar-date {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 63%;
  @include display.flex();

  &.disabled {
    cursor: not-allowed;

    &:hover {
      .mark {background: transparent;}
      span {color: inherit;}
    }
  }

  span {
    @include transitioning.ease(200ms);
    z-index: 1;
  }

  .mark {
    position: absolute;
    z-index: 0;
    height: 100%;
    width: 63%;
    @include transitioning.ease(200ms);
    @include border.radius(m)
  }

  &.marked {
    &.start .mark {
      right: -1px;
      width: 81.5%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &.between .mark {
      width: calc(100% + 2px);
      @include border.radius(0);
    }

    &.end .mark {
      left: -1px;
      width: 81.5%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &.not-in-month {
    cursor: default;
    .mark {background: none;}
  }
}