// Calendar

.calendar {
   background: $grey-light;
   height: auto;
   margin: 0 0 $spacing 0;
   padding: 0 150px;

   .owl-wrapper {
      margin: 0 auto;
   }

   .item {
      padding: 0 5px;

      a {
         border: 2px solid $grey-light;
         color: $grey;
         display: block;
         padding: 10px;
         text-align: center;
         text-decoration: none;
         p {
            display: flex;
            font: {
               size: 20px;
               weight: 600;
            }
            justify-content: center;
            margin: 5px 0;
            text-transform: uppercase;
            span {
               font: {
                  size: 20px;
                  weight: 300;
               }
               &.day {
                  font-weight: 600;
                  margin-right: 2px;
               }
            }
         }
         span {
            color: $grey;
            font: {
               size: 10px;
               weight: 600;
            }
            text-transform: uppercase;
         }
      }

      &:after {
         background: #d2d2d2;
         content: "";
         @include position(absolute, $top: 50%, $right: 0, $width: 1px, $height: 30px);
         @include transform(translateY(-50%));
      }

      &.active {
         a {
            background: $orange;
            border: 2px solid $orange;
            span {
               font-weight: 600;
            }
         }
      }

      &:hover a,
      &:focus a {
         border: 2px solid $orange;
      }
   }

   @media (max-width: $medium) {
      padding: 0 20px;
   }

   // Arrows control
   &.slide-arrow {
      .owl-controls {
         top: 0;
         width: 100%;

         .owl-buttons {
            justify-content: space-between;

            div {
               height: 30px;
               position: absolute;
               top: 20px;
               width: 10px;
               display: block !important;

               &.disabled {
                  display: none !important;
               }
            }

            .owl-prev {
               left: -30px;
            }
            .owl-next {
               right: -30px;
            }
         }
      }
   }

   // Calendario widget
   &.calendar-widget {
      background: #fbfbfb;
      height: 180px;
      margin-top: 1.9rem;
      padding: 1rem;
      p {
         margin-top: 0.65rem;
         text-align: center;
      }

      @media (max-width: $medium) {
         height: 150px;
         margin-top: 0.35rem;
      }
      @media (max-width: $small) {
         margin-top: 1.65rem;
      }
   }

   .circle-ico {
      .ico {
         background: #006cd8;
         -webkit-mask: url(../assets/svg/ico-calendar.svg) no-repeat 50% 50%;
         mask: url(../assets/svg/ico-calendar.svg) no-repeat 50% 50%;
      }

      svg,
      svg path {
         fill: #006cd8;
      }

      &:hover,
      &:focus {
         .ico {
            background: #fff;
            svg * {
               fill: white !important;
            }
         }
      }
   }
}