// Variables //—————————————————— $calendar-background-color: $bittersweet-light !default; $calendar-font-color: $white !default; $calendar-current-color: $bittersweet-dark !default;

$calendar-shadow: 0 1px 2px rgba(0, 0, 0, .2) !default; $calendar-radius: 4px !default;

// Exports //——————————————————

@include exports(“calendar”) {

/**
 * calendar
 * --------------------------------------------------
 */
      .calendar {
              padding: 20px;
              @include radius($type: border-radius, $value: $calendar-radius);
              color: $white;
              background-color: lighten($calendar-background-color, 10%);
              @include box-shadow($value: $calendar-shadow);

              & .unit {
                              float: left;
                              width: 14.28%;
                              text-align: center;
              }

              & .years {

                      & .prev {
                              text-align: left;
                      }
                      & .next {
                              text-align: right;
                      }
                      & .prev em,
                      & .next em {
                              position: relative;
                              display: inline-block;
                              @include radius($type: border-radius, $value: 50%);
                              border: 1px solid $calendar-font-color;
                              width: 34px;
                              height: 34px;
                              cursor: pointer;
                      }
                      & .prev em:before,
                      & .next em:before {
                              position: absolute;
                              display: block;
                              content: "";
                              margin-top: 6px;
                              border-style: solid;
                              border-width: 7px;
                              width: 0;
                              height: 0;
                              font-size: 0;
                      }
                      & .prev em:before {
                              top: 3px;
                              left: 4px;
                              border-color: transparent $calendar-font-color transparent transparent;
                      }
                      & .next em:before {
                              top: 3px;
                              left: 13px;
                              border-color: transparent transparent transparent $calendar-font-color;
                      }
                      & .prev em:hover,
                      & .next em:hover,
                      & .prev em:active,
                      & .next em:active {
                              border-color: $calendar-current-color;
                      }
                      & .prev em:hover:before,
                      & .prev em:active:before {
                              border-color: transparent $calendar-current-color transparent transparent;
                      }

                      & .next em:hover:before,
                      & .next em:active:before {
                              border-color: transparent transparent transparent $calendar-current-color;
                      }

                      & .monyear {
                              float: left;
                              width: 71.42%;
                              text-align: center;
                              height: 34px;
                              line-height: 34px;
                      }
              }

              & .days {
                      margin-top: 15px;
                      padding-top: 15px;
                      border-top: 1px solid lighten($calendar-current-color, 10%);
                      & .unit {
                              margin-bottom: 3px;
                              text-align: center;
                              height: 34px;
                              line-height: 34px;

                              & b {
                                      @include radius($type: border-radius, $value: 50%);
                                      font-weight: normal;
                                      width: 34px;
                                      height: 34px;
                              }
                              &:hover b,
                              &:active b,
                              &.active b {
                                      display: inline-block;
                                      background-color: $calendar-font-color;
                                      color: $calendar-current-color;
                                      cursor: pointer;
                                      @include transition (all 0.2s ease-in-out);
                              }
                              &.older b {
                                      color: $calendar-current-color;
                                      background-color: transparent;
                                      cursor: default;
                                      width: auto;
                                      height: auto;
                              }
                      }
              }
      }

}