dev/scss/header/datepicker.scss

@charset "utf-8";
@use "../util";
@use "../base/choose";
@use "../base/colors";
@use "../base/icons";
@use "../base/lengths";
@use "../base/mixins";

/**
 * Rules for the datepicker widget
 * (used in the Virtual Collection creator)
 * in Kalamar.
 */

div.datepicker {
  @include choose.choose-item;
  position:   absolute;
  display:    inline-block;
  z-index:    90;
  font-size:  80%;
  padding:    4pt;
  box-shadow: choose.$choose-box-shadow;

  border: {
    width:  lengths.$border-size;
    style:  solid;
    radius: lengths.$standard-border-radius;
  }

  > div {
    font-size: 120%;
    width:     45%;

    &.month {
      float: right;
    }

    > span {
      display:     inline-block;
      overflow:    hidden;
      white-space: nowrap;

      &:first-child,
      &:last-child {
	      width: 15%;
	      &::before {
          @include mixins.icon-font;
	        display:    inline-block;
	        text-align: center;
	        cursor:     pointer;
	        min-width:  14px;
	      }
      }

      &:first-child::before {
	      content: icons.$fa-previous;
      }

      &:last-child::before {
	      content: icons.$fa-next;
      }

      &:nth-child(2) {
	      display:       inline-block;
	      cursor:        pointer;
	      width:         70%;
	      text-align:    center;
	      text-overflow: ellipsis;

	      border: {
	        radius: lengths.$standard-border-radius;
	        style:  solid;
	        width:  lengths.$border-size;
	        color:  transparent;
	      }

	      &:hover {
	        @include choose.choose-hover;
	      }

	      &.selected {
	        @include choose.choose-active;
	      }
      }
    }
  }
  
  table {
    border-collapse: separate;
    border-spacing:  1px;
  }

  input {
    @include choose.choose-item;
    @include mixins.standard-text-padding;
    background-color: colors.$nearly-white;
    width:            100%;

    border: {
      style: solid;
      width: 1px;
    }
  }

  td {
    @include mixins.standard-text-padding;
    text-align: center;

    border: {
      style: solid;
      width: 1px;
    }

    &:not(.out) {
      @include choose.choose-item;
      cursor: pointer;
      background-color: colors.$nearly-white;

      &.today {
	      background-color: colors.$light-blue;
	      color: colors.$dark-blue;
	      text-shadow: none;
      }

      &.selected {
	      @include choose.choose-active;
      }

      &:hover {
	      @include choose.choose-hover;
      }
    }

    &.out {
      border-color: transparent;
    }
  }
}