// router-tab (header)
@import "./var.scss";
@import "./mixin.scss";
@import "./common/fonts.scss";
@import "./common/text.scss";
@import "./common/input.scss";
@import "./common/button.scss";
@import "./common/grid.scss";
@import "./common/card.scss";
@import "./common/tabs.scss";
@import "./common/numericInput.scss";
@import "./common/pagination.scss";
@import "./common/editor.scss";


html,
body {
  // overflow: auto;
}

a {
  color: inherit !important;
  text-decoration: none !important;
}

.w100 {
  width: 100%;
}

.w35p {
  width: 35px;
}

.h30 {
  height: 30%;
}

.h35 {
  height: 35%;
}

.h50 {
  height: 50%;
}

.h60 {
  height: 60%;
}

.h65 {
  height: 65%;
}

.h100 {
  height: 100%;
}

.bd {
  &-b1 {
    border-bottom: 1px #39383d solid;

    &:last-child {
      border-bottom: 0;
    }
  }
}

.col-grp {
  >.col {
    padding: 7px 0 !important;
  }
}

.searchFilter {
  &.v-card {
    padding: 16px (16px - ($column-spacer / 2)) !important;

    &>.row {
      &>[class*="col-"] {
        padding: 0 ($column-spacer / 2);
        box-sizing: border-box;
      }
    }

    .row+.row {
      margin-top: $row-spacer;
    }
  }

  // .fixed-width {
  //   fieldset {
  //     max-width: 345px;
  //   }
  // }
}


.v-application {
  font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif);
  font-size: var(--desktop-normal-font-size, 14px);

  .v-sheet {
    &.v-card {
      border-radius: 8px;

      &:not(.v-sheet--outlined) {
        box-shadow: none !important;
      }
    }
  }
}

.v-application--wrap {
  min-height: 100vh;

  &>div {
    height: 100%;
  }
}

.v-main,
.v-main__wrap,
.container {
  // height: 100%;
}

.v-main__wrap>.container {
  background: #383f5d;
}


.chart {
  height: 100%;

  &-title {
    display: block;
    width: 100%;
  }

  &-info {
    display: block;
    width: 100%;
    text-align: center;
  }
}

.v-application--is-ltr .v-messages {
  display: none;
}

.search-box {
  display: flex;
  align-items: center;

  &-label {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.0178571429em;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.88);
  }
}

.form-row {

  .pt-0 {
    .col {
      padding-top: 0
    }
  }
}

.v-window__container,
.v-window__container>div {
  height: 100%;
}

.v-banner {
  .v-banner__wrapper {
    border-bottom: none !important;
  }

  &--last {
    .v-banner__wrapper {
      border-bottom: none !important;
    }
  }

  .v-chip {
    padding: 0 5px;
  }
}

.v-timeline {
  .v-timeline-item {
    line-height: 1;
  }

  .v-timeline-item__divider {
    min-width: auto;
    align-self: center;
  }

  .v-timeline-item__dot--small {
    width: 6px;
    height: 6px;
    left: calc(50% - 3px);
  }

  .v-timeline-item__body {
    max-width: none !important;
  }
}

.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
  height: calc(100% - 30px);
  top: 10px;
  left: 22px !important;
  line-height: 0;
}

.v-label {
  font-size: 0.875rem !important;
}

@each $theme in dark, light {
  @include theme($theme);

  .v-application.#{$theme}-mode {
    min-width: 1000px;

    .ant-checkbox-wrapper.ant-checkbox-wrapper-disabled,
    .ant-checkbox-disabled .ant-checkbox-input
    {
      cursor: default !important;
    }

    .v-list-item__title {
      font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important;
    }

    .btn-close-menu-list {
      min-width: 100px;
      border-color: transparent;
      background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important;
  
      .v-list-item {
        min-height: 30px;
      }
  
      .v-list-item__title {
        color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
  
        &:hover {
          color: #46c0ff !important;
          cursor: pointer;
        }
      }
    }

    .icon-datepicker-color {
      color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
    }

    .head-logo {
      gap: 8px;
    }

    .v-window__container {
      background: map-deep-get($config, #{$theme}, "card-default-backgroundColor");
    }

    .search-box {
      &-label {
        color: map-deep-get($config, #{$theme}, "v-select-label-color");
      }
    }

    .search-box-label {
      color: map-deep-get($config, #{$theme}, "v-select-label-color");
    }

    .custom-chart{
      border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
    }

    .v-icon {
      color: currentColor;
      &.icon-orange {
        svg {
          fill:map-deep-get($config,
            #{$theme},
            "v-icon-orange"
          );
        }

      }

      &.icon-blue {
        svg {
          fill:map-deep-get($config,
            #{$theme},
            "v-icon-blue"
          );
        }

      }

      &.custom-chevron-down {

        fill:map-deep-get($config,
          #{$theme},
          "v-icon-chevron-down"
        );
        width: 14px;
        height: 14px;
      }

      &.custom-search-icon {

        fill:map-deep-get($config,
          #{$theme},
          "v-icon-search"
        );
        width: 14px;
        height: 14px;
      }
    }

    .router-tab {
      .router-tab__header {
        background-color: map-deep-get($config, #{$theme}, "router-header");
        border-color: map-deep-get($config, #{$theme}, "router-header");
        height: 46px;
        z-index: 7;
        max-width: calc(100vw - 290px);
      }

      .router-tab__container {
        background-color: map-deep-get($config, #{$theme}, "router-container");
      }

      .router-tab__item {
        background-color: map-deep-get($config, #{$theme}, "router-tab-item");
        border-color: map-deep-get($config, #{$theme}, "router-tab-item");
        color: map-deep-get($config, #{$theme}, "router-tab-item-color");

        &:not(.is-active) {
          &:hover {
            &>span {
              color: map-deep-get($config,
                #{$theme},
                "router-tab-item-hover-color"
              );
            }
          }
        }

        .v-icon {
          color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color");
        }

        &.is-active {
          background-color: map-deep-get($config,
            #{$theme},
            "router-tab-item-active"
          );
          border-color: map-deep-get($config,
            #{$theme},
            "router-tab-item-active-color"
          ) !important;
          color: map-deep-get($config,
            #{$theme},
            "router-tab-item-active-color"
          );

          .v-icon {
            color: map-deep-get($config,
              #{$theme},
              "router-tab-item-icon-active-color"
            );
          }

        }
      }

      .router-tab__slot-end {
        .v-btn {
          background-color: map-deep-get($config,
            #{$theme},
            "router-tab-slot-end-button-backgroundColor"
          );
          box-shadow: none;
        }
      }
    }

    .border-bottom-1 {
      border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
    }

    .v-box {
      min-width: 230px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-radius: 8px;
      background-color: map-deep-get($config, #{$theme}, "v-box");

      +.v-box {
        margin-top: 10px;
      }
    }

    .v-box-widget {
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      border-radius: 8px;
      background-color: map-deep-get($config, #{$theme}, "v-box");

      +.v-box {
        margin-top: 10px;
      }
    }

    .widget-card {
      height: 282px;
    }

    .vc-weeks {
      >.vc-weekday {
        background-color: map-deep-get($config,
          #{$theme},
          "v-calendar-weekday-backgroundColor"
        );
        border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        border-top: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        color: map-deep-get($config, #{$theme}, "v-calendar-weekday-color");

        &:nth-of-type(1) {
          // color: map-deep-get($config,
          //   #{$theme},
          //   "v-calendar-is-sun"
          // );
          border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        }

        // &:nth-of-type(7) {
        //   color: map-deep-get($config,
        //     #{$theme},
        //     "v-calendar-is-sat"
        //   );
        // }
      }

      >.vc-day {
        border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");

        .day-hldyNm,
        .day-label.is-holiday {
          color: map-deep-get($config,
            #{$theme},
            "v-calendar-is-sun"
          );
        }

        &.weekday-1 {

          .day-label,
          .day-hldyNm {
            color: map-deep-get($config,
              #{$theme},
              "v-calendar-is-sun"
            );
          }

          border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color");
        }

        &.weekday-7 {

          .day-label,
          .day-hldyNm {
            color: map-deep-get($config,
              #{$theme},
              "v-calendar-is-sat"
            );
          }
        }

        &.is-today {
          >div {
            background-color: map-deep-get($config,
              #{$theme},
              "v-calendar-is-today-background-color"
            );
          }
        }

        .day-label {
          color: map-deep-get($config, #{$theme}, "v-calendar-day-color");
        }

        &.is-not-in-month {
          background-color: map-deep-get($config,
            #{$theme},
            "v-calendar-day-in-not-month-color"
          );

          .day-label {
            color: map-deep-get($config, #{$theme}, "card-text-title-color");
          }
        }
      }
    }

    .v-dialog {
      .v-toolbar {
        .v-toolbar__title {
          color: map-deep-get($color, "white", "0");
        }
      }

      .v-card.theme--#{$theme} {
        .v-card__text {
          color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
        }
      }
    }

    #startpicker-container .tui-datepicker-footer .tui-timepicker .tui-timepicker-row .tui-timepicker-column.tui-timepicker-colon,
    #endpicker-container .tui-datepicker-footer .tui-timepicker .tui-timepicker-row .tui-timepicker-column.tui-timepicker-colon {
      color: map-deep-get($config,
        #{$theme},
        "tui-datepicker-calendar-color"
      ) !important;
    }

    .tui-datepicker .tui-is-selectable.tui-is-selected,
    .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
      background-color: map-deep-get($config,
        #{$theme},
        "tui-datepicker-selected-color"
      );

      @if $theme ==light {
        color: #fff;
      }
    }

    .tui-datepicker {
      background-color: map-deep-get($config,
        #{$theme},
        "tui-datepicker-backgroundColor"
      );
      border-color: map-deep-get($config,
        #{$theme},
        "tui-datepicker-border-color"
      );
      border-radius: 4px;
      overflow: hidden;
      z-index: 100;

      .tui-is-selectable:hover {
        background-color: map-deep-get($config,
          #{$theme},
          "tui-datepicker-selectable-hover-color"
        );
      }
    }

    .tui-calendar,
    .tui-calendar-btn {
      background-color: map-deep-get($config,
        #{$theme},
        "tui-datepicker-backgroundColor"
      );
    }

    .tui-datepicker-type-date,
    .tui-calendar {
      min-width: 180px !important;
      max-width: 210px !important;
    }

    .tui-calendar {

      &.tui-calendar-year,
      &.tui-calendar-month {

        & th,
        & td {
          height: 48px;
          color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
        }
      }

      & th,
      & td {
        height: 32px;
      }

      &-title {
        font-size: 0.875rem;
        color: map-deep-get($config,
          #{$theme},
          "tui-datepicker-calendar-color"
        );
        line-height: 1.28;
      }

      &-header {
        border-bottom: 1px solid map-deep-get($config,
          #{$theme},
          "tui-datepicker-border-color"
        ) !important;
      }

      &-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 32px;
        padding: 4px;
        box-sizing: border-box;
      }

      &-btn {
        width: 24px;
        height: 24px;
        position: relative;
      }

      .tui-calendar-btn-prev-month:after,
      .tui-calendar-btn-prev-year:after {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
        background-position: 0 0;

        @if $theme ==dark {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_left' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-left' class='cls-2' d='M923.742,118.668l6,6,6-6' transform='translate(349.668 -770.742) rotate(90)'/%3E%3C/g%3E%3C/svg%3E");
        }

        @else {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m923.742 118.668 6 6 6-6' transform='rotate(90 525.705 -392.037)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E");
        }
      }

      .tui-calendar-btn-next-month:after,
      .tui-calendar-btn-next-year:after {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        right: 0;
        background-position: 0 0;

        @if $theme ==dark {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_right' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-right' class='cls-2' d='M0,6,6,0l6,6' transform='translate(230.999 153) rotate(90)'/%3E%3C/g%3E%3C/svg%3E%0A");
        }

        @else {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m0 6 6-6 6 6' transform='rotate(90 4.5 10.5)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E%0A");
        }
      }

      .tui-calendar-week {
        @if $theme ==dark {
          border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        }

        @else {
          border-bottom: 1px solid #e6e6e6;
        }
      }

      &-body-header {
        th {
          font-size: 0.875rem;
          color: map-deep-get($config,
            #{$theme},
            "tui-datepicker-calendar-color"
          );
        }

        th.tui-sun {
          color: map-deep-get($config,
            #{$theme},
            "v-calendar-is-sun"
          );
        }

        th.tui-sat {
          color: map-deep-get($config,
            #{$theme},
            "v-calendar-is-sat"
          );
        }
      }

      &-week {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);

        td {
          font-size: 0.875rem;
          color: map-deep-get($config,
            #{$theme},
            "tui-datepicker-calendar-color"
          );
        }

        td.tui-calendar-sun {
          color: map-deep-get($config,
            #{$theme},
            "v-calendar-is-sun"
          );
        }

        td.tui-calendar-sat {
          color: map-deep-get($config,
            #{$theme},
            "v-calendar-is-sat"
          );
        }
      }
    }

    .tui-datepicker-footer {
      border-top: 1px solid map-deep-get($config,
        #{$theme},
        "tui-datepicker-border-color"
      ) !important;
      text-align: center;
    }

    .tui-datepicker-footer .tui-timepicker {
      width: 107px;
      padding: 10px 0;
      margin: 0 auto;
      border-top: none;

      &-row {
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
        border-radius: 4px;
        background-color: transparent !important;
      }

      &-select {
        background-color: map-deep-get($config,
          #{$theme},
          "tui-datepicker-backgroundColor"
        );
        font-size: 0.875rem;
        color: map-deep-get($config,
          #{$theme},
          "tui-datepicker-calendar-color"
        );
        line-height: 1.285;
      }
    }

    .v-list {
			background-color: map-deep-get($config,
				#{$theme},
				"tui-datepicker-backgroundColor"
			);
			border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color");
			border-radius: 4px;
			padding: 4px;
	
			&-item--active {
				border-radius: 4px;
				&:before {
					opacity: 0;
				}
	
				.v-list-item__title {
					color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
        }
			}
	
			&.v-select-list{
				>.v-list-item {
					margin-bottom: 4px;
					.anticon {
						&.anticon-check {
							display: none;
						}
					}
					&[aria-selected="true"] {
						border-radius: 8px;
						background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg");
						.anticon {
							&.anticon-check {
								display: block;
								color: map-deep-get($config, #{$theme}, "v-icon-blue");
							}
						}
					}
				}
			}

		}

    .theme--white {
      .toastui-editor-contents {
        * {
          color: #fff !important;
        }
      }
    }

    // .toastui-editor-contents {
    //   * {
    //     color: map-deep-get($config,
    //       #{$theme},
    //       "tui-editor-contents-color"
    //     ) !important;
    //   }
    // }

    .lnb-logo {
      color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
      font-size: 2rem;
      font-weight: bold;
      padding-left: 8px;
      margin-top: 2px;

      img {
        width: 139px;
      }
    }

    .login-logo {
      color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
      font-size: 1.5rem;
      font-weight: bold;
    }
  }

  .btn-close-menu-list {
    min-width: 100px;
    border-color: transparent;

    .v-list-item {
      min-height: 30px;
    }

    .v-btn {
      background-color: transparent !important;
      color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
    }

  }

  [hover-tooltip] {
    $caret-height: 4px;
    $caret-width: 6px;
    $distance: -12px;
    $tooltip-bg-color: rgba(39, 39, 39, 0.8);

    position: relative;
    cursor: default;

    &:hover {
      &::before {
        content: attr(hover-tooltip);
        font-size: 14px;
        text-align: center;
        position: absolute;
        display: block;
        left: 50%;
        min-width: 150px;
        max-width: 200px;
        bottom: calc(100% + #{$distance});
        transform: translate(-50%);
        animation: fade-in 300ms ease;
        background: $tooltip-bg-color;
        border-radius: 4px;
        padding: 10px;
        color: #ffffff;
        z-index: 1;
      }

      &::after {
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        width: 0;
        height: 0;
        bottom: calc(100% + #{$distance - $caret-height});
        margin-left: - $caret-width/2;
        border: 1px solid black;
        border-color: $tooltip-bg-color transparent transparent transparent;
        border-width: $caret-height $caret-width 0;
        animation: fade-in 300ms ease;
        z-index: 1;
      }
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.8;
    }
  }

}


.ant-card .ant-card-body {
  padding: 0;
}