@import 'functions';
@import 'mixins';
@import 'variables';

/* Perfect Scrollbar */
.ps {
	& .ps__rail-x {
		z-index: 10;

		&:focus,
		&:hover,
		&.ps--clicking {
			background: none;
		}
	}
	& .ps__rail-y {
		z-index: 10;
		width: 6px !important;
		background: none !important;

		&:focus,
		&:hover,
		&.ps--clicking {
			width: 6px !important;
			background: none !important;

			& .ps__thumb-y,
			& > .ps__thumb_y {
				width: 6px !important;
			}
		}
	}
}
.page-sidebar-minified {
	& .sidebar {
		& .ps {
			& .ps__rail-x,
			& .ps__rail-y {
				display: none !important;
			}
		}
	}
}


/* Countdown Timer */
.countdown-section {
	display: block;
	text-align: center;

  .countdown-show1 & {
    width: 98%;
  }
  .countdown-show2 & {
    width: 48%;
  }
  .countdown-show3 & {
    width: 32.5%;
  }
  .countdown-show4 & {
    width: 24.5%;
  }
  .countdown-show5 & {
    width: 19.5%;
  }
  .countdown-show6 & {
    width: 16.25%;
  }
  .countdown-show7 & {
    width: 14%;
  }
}
.countdown-period {
  display: block;
}


/* Calendar */
.fc {
  & .fc-toolbar {
    display: block;

    & > * {
      & > * {
        float: none;
      }
    }
  }
}


/* Material Header Sort */
.mat-sort-header-sorted {
  & .mat-sort-header-button {
    &:focus {
      outline: none;
    }
  }
}


/* Ng Bootstrap Datepicker */
ngb-datepicker {
  border: none;

  &.dropdown-menu {
    padding: 5px;

    @include border-radius($border-radius-lg);
  }
  & .ngb-dp-header {
    background: none;

    & ngb-datepicker-navigation-select {
      & > .custom-select {
        font-size: 12px;
        height: 26px;
        margin: 0 5px;
      }
    }
  }
  & .ngb-dp-months {
    & .ngb-dp-month {
      & ngb-datepicker-month-view {
        & .ngb-dp-week {
          border: none;
          background: none !important;

          & .ngb-dp-weekday {
            font-style: initial;
            font-size: 12px;
            font-weight: bold;
            color: $dark;
          }
          & .ngb-dp-day {
            font-weight: 600;

            &:focus {
              outline: none;
            }
            & .btn-light {
              color: lighten($dark, 30%);

              &:hover,
              &:focus,
              &:active {
                background: lighten($dark, 75%);
                color: $dark;
              }
              &:focus,
              &:active,
              &.active {
                outline: none !important;

                @include box-shadow(none !important);
              }
              &.bg-primary {
                color: $white;
                background: $form-component-active-bg !important;
              }
            }
          }
        }
      }
    }
  }
}


/* Tag Input */
.ng2-tag-input {
  border: 1px solid lighten($border-color, 5%) !important;
  padding: 3px 12px !important;
  min-height: 34px !important;

  @include border-radius($border-radius);

  & .ng2-tags-container {
    & tag {
      font-family: inherit;
      font-size: 12px;
      letter-spacing: 0;
      font-weight: 600;
      padding: 3px 8px;
      height: auto;
      line-height: 16px;
      background: $form-component-active-bg;
      color: $white;

      @include border-radius($border-radius-sm);

      & svg {
        height: 16px !important;
      }
    }
    & .ng2-tag-input__text-input {
      height: 24px;
      font-size: 12px;
      font-weight: 500;
      color: $dark;

      @include placeholder(lighten($dark, 30%));
    }
  }
}
.inbox .email-to .form-control {
  height: auto;
  min-height: 34px;

  & .ng2-tag-input {
    height: auto !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: -5px;
    margin-bottom: -5px;
  }
}


/* Angular Calendar */
.angular-calendar-inline {
  & .cal-month-view {
    & .cal-header {
      border-bottom: 1px solid lighten($border-color, 5%);

      & .cal-cell {
        font-size: 10px;
        text-transform: uppercase;
        color: $dark;
        padding: 5px 10px;
      }
    }
    & .cal-days {
      border: none;

      & .cal-cell-row {
        &:hover {
          background: none;
        }
        & .cal-cell {
          position: relative;
          min-height: initial;

          &:hover,
          &:focus {
            background: lighten($dark, 75%);
            color: $dark;
          }
          & .cal-cell-top {
            position: relative;
            min-height: initial;

            & .cal-day-number {
              color: lighten($dark, 30%);
              font-size: 12px;
              font-weight: 600;
              margin-right: 3px;
              margin-bottom: 3px;
              margin-top: 20px;
              min-width: 20px;
              min-height: 20px;
              opacity: 1;

              @include border-radius(20px);
              @include display-flex();
              @include flex-align(center);
              @include flex-justify-content(center);
            }
            & .cal-day-badge {
              text-indent: 20px;
              width: 5px;
              height: 5px;
              min-width: 3px;
              padding: 0;
              overflow: hidden;
              position: absolute;
              bottom: 25px;
              margin: 0;
              right: 11px;
              background: $red;
            }
          }
          & .cal-events {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;

            & .cal-event {
              width: 5px;
              height: 5px;
              display: inline-block;
              margin: 1px;
              background: lighten($dark, 50%);

              @include border-radius(50%);
            }
          }
          &.cal-today {
            background: none;

            & .cal-cell-top {
              & .cal-day-number {
                background: $dark;
                color: $white;
              }
            }
          }
          &.cal-event-highlight {
            background: lighten($dark, 75%) !important;
          }
          &.cal-day-cell {
            &:not(:last-child) {
              border-right-color: lighten($border-color, 5%);;
            }
          }
        }
      }
    }
  }
}


/* Ngx Loading bar */
#loading-bar-spinner {
  color: $primary !important;

  .loading-bar-fixed & {
    top: $header-height + $content-padding-y - 7 !important;
    right: $content-padding-x - 20 !important;
    left: auto !important;
  }
}
#loading-bar {
  & .bar {
    background: $primary !important;
    height: 3px !important;

    .loading-bar-fixed & {
      top: $header-height !important;
    }
    & .peg {
      @include box-shadow(none);
    }
  }
}
