znamenica/dneslov

@import "defines";

html {
   .row.calendary {
      height: auto;
      text-align: center;
   }
}

.pickmeup {
   font-size: inherit;
   background: transparent;
   border-radius: 0.4em;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   display: inline-block;
   position: absolute;
   touch-action: manipulation;

   .pmu-template {
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   }

   &.pmu-flat {
      @extend .pmu-template !optional;
      position: relative;
      background: transparent;
   }

   &.pmu-hidden {
      //display: none;
      display: block;
   }

  &:not(.pmu-view-days) .pmu-days, &:not(.pmu-view-days) .pmu-day-of-week,
  &:not(.pmu-view-months) .pmu-months, &:not(.pmu-view-years) .pmu-years {
     display: none;
  }

   .pmu-instance {
      @extend .pmu-template !optional;
      display: inline-block;
      padding: .5em;
      height: auto;
      width: 17rem;
      text-align: center;
      line-height: inherit;

      .pmu-selected {
         background-color: $selected_color;

         &:hover {
            background-color: $lighten_selected_color;
         }
      }

      .pmu-days {
         line-height: inherit;
         padding: 0 0.8rem;

         * {
            display: inline-block;
            line-height: 1.5em;
            width: 2em;
         }

         .pmu-button {
            border-radius: 50%;
            margin-left: 0.1rem;
            margin-right: 0.1rem;
            width: 1.84rem;
            height: 1.84rem;
         }

         .pmu-date-light-fast {
            background-color: $light_fast_color;
            color: $ink;
         }

         .pmu-date-fast {
            background-color: $fast_color;
            color: $ink;
         }

         .pmu-date-easter {
            background-color: $easter_color;
            color: $inverted_ink;
         }

         .pmu-date-double {
            position: relative;
            line-height: inherit;

            .pmu-date-self {
               position: absolute;
               line-height: 2rem;
               top: -0.4rem;
               font-size: 1.2rem;
               left: 0;
               width: 100%;
            }

            .pmu-date-usual {
               position: absolute;
               line-height: 2rem;
               top: 0.35rem;
               font-size: 0.6rem;
               left: 0;
               width: 100%;
            }
         }

         .pmu-not-in-month {
            color: #717171;
         }

         .pmu-today {
            background-color: $today_color
         }

         .pmu-selected {
            background-color: $selected_color
         }

         .pmu-today.pmu-selected {
            @extend .pmu-today;
            border: 0.1rem solid $selected_color;
         }
      }

      .pmu-day-of-week {
         background-color: #f79eb3;
         padding: 0 0.8rem;

         * {
            display: inline-block;
            line-height: 1.8em;
            width: 2em;
         }

         div {
            margin-left: 0.1rem;
            margin-right: 0.1rem;
         }
      }

      .pmu-years *, .pmu-months * {
         display: inline-block;
         line-height: 3.6em;
         width: 3.5em;
      }

      & > nav {
         height: auto;
         width: auto;
         line-height: 2em;
         display: -ms-flexbox;
         display: -webkit-flex;
         display: flex;
         justify-content: space-between;
         background-color: $terracota;
         color: rgba(47, 16, 95, 0.96);

         .pmu-yesterday {
            @extend .pmu-prev !optional
         }

         .pmu-tomorrow {
            @extend .pmu-next !optional
         }

         .pmu-month {
            width: 14em;
         }
      }

      &:first-child .pmu-prev, &:last-child .pmu-next {
         display: block;
      }

      &:first-child, &:last-child {
         .pmu-month {
            width: 13em;;
         }
      }

      &:first-child:last-child {
         .pmu-month {
            width: 12em;;
         }
      }

      .pmu-button {
         color: $dark;
         //background-color: $terracota;
         cursor: pointer;
         outline: none;
         text-decoration: none;
         padding: 0.1rem;
         box-sizing: border-box;
         border: 0.1rem solid transparent;

         &:hover {
            //@extend .pmu-button;
            //background-color: $lighten_terracota;
         }
      }

      label.pmu-style:after,
      label.pmu-style:before,
      label.pmu-style {
         content: none;
         display: inline-block;
         cursor: pointer;
         color: $dark;
         background: $terracota;
         box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.2), inset 0 -0.2rem 0 rgba(0,0,0,0.22);
         transition: 0.3s;
         user-select: none;

         width: fit-content;
         height: 2rem;
         padding: 0;
         text-align: center;
         //font-stretch: condensed;
         font-size: 1rem;
         outline: medium none;
         text-decoration: none;
         letter-spacing: -0.15rem;
         border: medium none;
         border-radius: 0.15rem;
         line-height: 200%;
         text-transform: uppercase;

         span {
            transform: scale(0.75);
         }

         &:hover {
            background: darken($terracota, 10%);
            color: darken($dark, 10%);
            box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.2), inset 0 -0.2rem 0 rgba(0,0,0,0.32);
         }
      }

      label.pmu-style:after {
         margin-left: 0.2rem;
      }

      label.pmu-style:hover {
         background: darken($terracota, 5%);
         color: darken($dark, 5%);
         box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.2), inset 0 -0.2rem 0 rgba(0,0,0,0.32);
      }

      label.pmu-style.checked {
         background: darken($terracota, 25%);
         color: lighten($dark, 5%);
         transform: translateY(0.15rem);
         box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.2), inset 0 -0.1rem 0 rgba(0,0,0,0.22);
      }

      label.pmu-style.clicked {
         filter: brightness(0.75);
      }

      label.pmu-style.julian {
         width: 42%;
      }

      label.pmu-style.neojulian {
         width: 58%;
      }
   }
}