.dox-ui {
  @import "bootstrap";
  @import "~react-select/dist/react-select.min.css";
  @import "~react-datepicker/dist/react-datepicker.min.css";

  @import "common";
  @import "components";
  @import "modules";
}

/* Out of namespace context for datepicker */
div[data-reactroot].customized-date-picker-calendar {
  @import "common/variables";
  @import "common/typography";
  border-color: $light-gray;
  margin-top: -8px;
	color: $black;
  .react-datepicker__triangle {
      margin-top: 0px;
  }
  .react-datepicker__navigation--previous::before, .react-datepicker__navigation--next::before {
    width: 8px;
    height: 8px;
    display: inline-block;
    position: absolute;
    top: -4px;
  }
  .react-datepicker__navigation--previous::before {
    left: 0;
    content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
  }
  .react-datepicker__navigation--next::before {
    right: 0;
    content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
  }

  .react-datepicker__navigation--previous, .react-datepicker__navigation--next {
      border: none;
  }


  .react-datepicker__month-container {
		.react-datepicker__header {
			background-color: $background-gray;
      border-bottom: none;
      .react-datepicker__current-month {
        @extend .body-1-semibold;
        background-color: $background-gray;
        margin-bottom: 10px;
      }
      .react-datepicker__day-names {
        @extend .body-1;
        background-color: $white;
      }
		}
    .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
      @extend .body-1;
      background-color: $blue;
			color: $white;
    }
    .react-datepicker__day {
			border-radius: 0px;
			margin: 0;
			flex: 1;
      @extend .body-1;
    }

		.react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
			background-color: $tlv-hover;
			color: $black;
			&.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end  {
				background-color: $blue;
				color: $white;
			}
			&.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
				background-color: lighten($blue, 40%);
				color: $black;
			}
			&.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
			&.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
			&.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
				background-color: $blue;
				color: $white;
			}
		}

		.react-datepicker__week {
			display: flex;
    }
	}
}

/* Out of namespace context for tooltips */
div[data-reactroot].tooltip {
  @import "common/variables";
  @import "common/typography";

  &.in {
  	opacity: 1;
  }
  &.validation-error-message {
    &.bottom {
      .tooltip-arrow {
      border-bottom-color: $red !important;
      }
    }
    &.left {
      .tooltip-arrow {
        border-left-color: $red !important;
      }
    }
    &.right {
      .tooltip-arrow {
        border-right-color: $red !important;
      }
    }
    &.top {
      .tooltip-arrow {
        border-top-color: $red !important;
      }
    }
  }
  &.bottom {
    .tooltip-arrow {
      border-bottom-color: $dark-gray !important;
    }
  }
  &.top {
    .tooltip-arrow {
      border-top-color: $dark-gray !important;
    }
  }
  .tooltip-inner {
    @extend .body-1;
    max-width: 100%;
    background-color: $dark-gray;
    padding: 6px 9px;
    &:first-letter {
      text-transform: capitalize;
    }
  }

  // activity log tooltip
  &.activity-log-message-tooltip {
	  @include base-font-regular;
    font-size: $body-font-2;
    .message-block {
      text-align: left;
      padding: 3px 12px;
    }
  }
  //dependency table error tooltip
  &.select-action-table-error-tooltip{
    @include base-font-regular;
    margin-right: 5px;
    font-size: $body-font-2;
    .message-block {
      text-align: left;
      padding: 3px 12px;
    }
    .tooltip-arrow {
           border-bottom-color: $red !important;
	  }

    .tooltip-inner {
      background-color: $red;
      padding: 6px 8px;
      font-size: $body-font-2;
    }
  }

  // for read-only mode, vendor description in VLM overview
  &.vendor-description-tooltip {
    .tooltip-inner {
      max-width: 600px;
    }
  }
}