@charset 'utf-8';
$win-min-w: 420px;
$win-min-h: 640px;
html {
  height: 100%;
  overflow: hidden;
}
body {
  position: relative;
  width: 100%;
  height: 100%;
  /*min-width: 1160px;
  min-height: 800px;*/
  min-width: $win-min-w !important;
  min-height: $win-min-h !important;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: #333;
  font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
    Gulim, '굴림';
  font-size: 14px;
  line-height: 18px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div,
p,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
iframe,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}
$lg-red: (
  50: #ffffff,
  100: #fff9fc,
  200: #f1e1e5,
  /*300: #f06292,*/ 300: #ef4c73,
  400: #ec407a,
  500: #ed097e,
  600: #d81b60,
  700: #c2185b,
  800: #ad1457,
  /*900: #880e4f,*/ 900: #5f2a41,
  A100: #ff80ab,
  A200: #ff4081,
  A400: #ff3399,
  A700: #c51162,
  B100: #4f4f4f,
  B200: #67545b,
  G100: #ef4c73,
  G900: #352a37,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
    B100: $light-primary-text,
    G100: $dark-primary-text,
    G900: $light-primary-text
  )
);

$aquaBlue-daesang: (
  50: #f9feff,
  100: #ebfdff,
  200: #a7f3fd,
  300: #4dd0e1,
  400: #26c6da,
  500: #00bcd4,
  600: #00b6d5,
  700: #1ea7b9,
  800: #0367a6,
  900: #024873,
  A100: #84ffff,
  A200: #18ffff,
  A400: #00e5ff,
  A700: #06a6c1,
  B100: #2d3a4a,
  B200: #00b6d5,
  G100: #0367a6,
  G900: #6dd5ed,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
    B100: $light-primary-text,
    G100: $dark-primary-text,
    G900: $light-primary-text
  )
);
$daesang-grey: (
  50: #fafafa,
  100: #f5f5f5,
  200: #eeeeee,
  300: #e0e0e0,
  400: #bdbdbd,
  500: #9e9e9e,
  600: #757575,
  700: #616161,
  800: #424242,
  900: #2d3a4a,
  A100: #ffffff,
  A200: #eeeeee,
  A400: #bdbdbd,
  A700: #1e2b3a,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text
  )
);

$lf-red: (
  50: #fffdfd,
  100: #fffbfc,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #d9232e,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  B100: #303e48,
  B200: #603537,
  G100: #ffdca1,
  G900: #e2544d,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text
  )
);

$lf-amber: (
  50: #fff8e1,
  100: #ffecb3,
  200: #fae999,
  300: #ffd54f,
  400: #ffca28,
  500: #ffc107,
  600: #ffb300,
  700: #ffa000,
  800: #ff8f00,
  900: #ff6f00,
  A100: #ffe57f,
  A200: #ffd740,
  A400: #ffc400,
  A700: #ffab00,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text
  )
);

$lf-blue-grey: (
  50: #eceff1,
  100: #cfd8dc,
  200: #eceef2,
  300: #90a4ae,
  400: #78909c,
  500: #607d8b,
  600: #546e7a,
  700: #455a64,
  800: #303e48,
  900: #263238,
  A100: #cfd8dc,
  A200: #b0bec5,
  A400: #78909c,
  A700: #455a64,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text
  )
);

@mixin ucap-material-theme($theme) {
  @include ucap-core-theme($theme);
}

@mixin ucap-core-theme($theme) {
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  $gradient-darkest: mat-color($accent, G900);
  $gradient-light: mat-color($accent, G100);

  //basic
  .bg-primary-darkest {
    background: mat-color($primary, 900);
    color: mat-color($primary, default-contrast);
  }
  .bg-primary-dark {
    background: mat-color($primary, 900);
    color: mat-color($primary, default-contrast);
  }
  .bg-primary-light {
    background: mat-color($primary, 300);
    color: mat-color($primary, default-contrast);
  }
  .bg-primary-color {
    background: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-darkest {
    background: mat-color($accent, B100);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-dark {
    background: mat-color($accent, 600);
    color: mat-color($primary, default-contrast);
    &:hover {
      background: mat-color($accent, B200);
    }
  }
  .bg-accent-light {
    background: mat-color($accent, 300);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-bright {
    background-color: mat-color($accent, 100);
  }
  .bg-accent-brightest {
    background: mat-color($accent, 50);
    color: mat-color($primary, $dark-primary-text);
  }
  .bg-accent-color {
    background: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
  .bg-warn-color {
    background-color: mat-color($warn, 300);
  }
  .bg-warn-darkest {
    background-color: mat-color($warn, 600);
  }
  .text-primary-light {
    color: mat-color($primary, 500);
  }
  .text-primary-color {
    color: mat-color($primary);
  }
  .text-accent-dark {
    color: mat-color($accent, 600);
  }
  .text-accent-darkest {
    color: mat-color($accent, 800);
  }
  .text-accent-color {
    color: mat-color($accent);
  }
  .text-warn-color {
    color: mat-color($warn, 800);
  }
  .border-primary-color {
    border-color: 1px solid mat-color($primary);
  }
  .border-accent-bright {
    border-color: mat-color($accent, 300);
  }
  .border-accent-color {
    border-color: 1px solid mat-color($accent);
  }
  .stroke-accent-darkest {
    stroke: mat-color($accent, 800);
  }
  .border-warn-color {
    border: mat-color($warn);
  }
  .stroke-warn-color {
    stroke: mat-color($warn, 900);
  }
  // sass 정의
  .mat-toolbar {
    background-color: mat-color($accent, B100);
  }
  .main-container {
    border-color: mat-color($accent, B100);
  }
  .global-menu {
    background-color: mat-color($accent, B100);
  }

  .ucap-clickable {
    cursor: pointer;
  }

  .policy {
    color: mat-color($accent, B100);
    //rgba($color: #000000, $alpha: 0.7);
  }

  .upload-profile .upload-profile-spinner svg circle {
    stroke: inherit;
  }
  .mat-badge-accent .mat-badge-content,
  .weblink .mat-badge-content {
    background-color: mat-color($warn, 400);
  }

  .mat-tab-group.mat-primary .mat-ink-bar,
  body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
    background-color: mat-color($accent, 500);
  }
  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
    background-color: mat-color($accent, 300);
    cursor: pointer;
    .mat-chip-remove {
      opacity: 0.4;
      width: 20px;
      height: 20px;
      justify-content: center;
      align-self: center;
    }
  }
  .login-form {
    .submit-button[ng-reflect-disabled='false'] {
      background-color: #333333;
      color: #ffffff;
      &:hover {
        background-color: mat-color($accent, 600);
      }
    }
  }
  .load-container .loader:after {
    background-color: mat-color($accent, 300);
  }

  .ps__rail-y {
    & > .ps__thumb-y {
      margin-right: -2px;
    }
  }

  .cdk-virtual-scroll-orientation-vertical {
    .cdk-virtual-scroll-content-wrapper {
      width: 100%;
      height: 100%;
      contain: none;
    }
  }

  .global-menu {
    .mat-tab-label[aria-selected='true'] {
      .mat-tab-label-content {
        .icon-item {
          background: mat-color($accent, 600);
        }
      }
    }
  }

  .mat-form-field-appearance-legacy {
    .mat-form-field-label {
      color: mat-color($primary);
    }

    .mat-hint {
      color: mat-color($primary);
    }

    .mat-form-field-underline {
      background-color: mat-color($primary);
    }
  }

  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    height: 34px;
    line-height: 34px;
    padding: 0 12px;
  }

  .app-dialog-full .mat-dialog-container {
    overflow: hidden;
    padding: 0px;
    background-color: rgba($color: #000000, $alpha: 0.7);
    box-shadow: none;
    border-radius: 0px;
  }

  .btn-main-float .bg-accent-dark {
    background: mat-color($accent, 600);
    color: mat-color($primary, default-contrast);
  }

  .current-head {
    display: flex;
    justify-content: center;
    padding: 0 10px;
    background-color: #eeeeee;
    background: $gradient-light;
    background: -webkit-linear-gradient(
      to right,
      $gradient-darkest,
      $gradient-light
    );
    background: linear-gradient(to right, $gradient-darkest, $gradient-light);
    color: #ffffff;
  }

  //탭개수에 의한 width 정의
  .mat-tab-group {
    &.tab_num2 {
      .mat-tab-label {
        width: 50%;
        min-width: 50%;
      }
    }
    &.tab_num3 {
      .mat-tab-label {
        width: 33%;
        min-width: 33%;
      }
    }
    .mat-ink-bar {
      opacity: 1;
    }
    .mat-tab-body-wrapper {
      height: 100%;
      border: none;
    }
  }

  //쪽지 라디오 버튼 정렬
  .message-box {
    .mat-radio-label {
      .mat-radio-label-content {
        padding-left: 4px;
      }
    }
  }

  mat-tab-group[vertical] {
    display: flex;
    flex-direction: row;
    .mat-tab-header {
      border-bottom: none;
      .mat-tab-labels {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
        .mat-tab-label {
          justify-content: flex-start;
          padding: 0;
          &[aria-selected='true'] {
            opacity: 1;
          }
          .mat-checkbox {
            margin-right: 8px;
          }
        }
      }
    }
    .mat-ink-bar {
      opacity: 0;
    }
    .mat-tab-body-wrapper {
      flex: 1 1 auto;
      border-left: 1px solid #dddddd;
      padding: 0;
    }
  }

  mat-tab-group[vertical] {
    display: flex;
    flex-direction: column;

    .mat-tab-header {
      border-bottom: none;
      .mat-tab-labels {
        display: flex;
        flex-direction: column;
        align-content: flex-start;

        .mat-tab-label {
          min-width: 60px;
          padding: 0 5px;
          justify-content: center;
        }
      }
    }
  }

  .mat-form-field-appearance-legacy[inlineEdit] .mat-form-field-underline {
    background-color: transparent;
  }

  app-page-messenger-main mat-drawer-content {
    overflow: hidden !important;
  }

  .mat-tab-labels .cdk-focused {
    background-color: transparent !important;
  }

  .messages .container {
    background: mat-color($accent, 50);
  }
  .profile-img {
    .responsive-chats-button:last-child {
      background-color: mat-color($accent, B100);
    }
  }

  //대화 말풍선 global 적용
  .message-row {
    .message-main {
      .bubble {
        background-color: mat-color($accent, 100);
        border: 1px solid mat-color($accent, 200);
        overflow: hidden;
        .bubble-main {
          word-wrap: break-word;
          white-space: pre-wrap;
          word-break: break-word;
          a {
            color: #0367a6;
            text-decoration: underline;
          }
        }
        .btn-box {
          min-width: 300px;
          @media screen and (max-width: #{$tablet-s-width}) {
            min-width: 250px;
          }
        }
      }
    }
    &.me {
      .message-main {
        .bubble {
          background-color: #ffffff;
          border: 1px solid mat-color($primary, 300);
          .event-info {
            border-radius: 0 0 0 6px;
          }
        }
      }
    }
  }

  //[s] 번역
  .translationForm {
    background-color: mat-color($accent, 200, 0.4);
    .select-language {
      .mat-form-field-wrapper {
        width: 100%;
        line-height: 0.8em;
        .mat-form-field-infix {
          padding: 0.2em 0 0;
        }
      }
      .mat-form-field-underline {
        bottom: 0.8em;
      }
    }
    .mat-slide-toggle {
      @media screen and (max-width: #{$tablet-s-width}) {
        label {
          width: 20%;
          flex-flow: column;
          font-size: 0.8em;
        }
      }
    }
  }
  .translation-preview {
    background-color: mat-color($accent, 900, 0.8);
  }

  .tree-has-child {
    li {
      .tree-node-body {
        background-color: mat-color($accent, 100);
        border: 1px solid mat-color($accent, 200);
      }
    }
  }
  .mat-calendar-body-selected {
    background-color: mat-color($accent);
  }
  .list-item {
    &.selected {
      background-color: mat-color($accent, 100);
      border-right: 2px solid mat-color($accent, 800);
    }
  }
  .mat-simple-snackbar-action {
    button {
      background-color: mat-color($accent, 500);
    }
  }
  .chatroom-search {
    .search-form {
      border: 2px solid mat-color($accent, B100);
    }
    .btns {
      background-color: mat-color($accent, B100);
    }
  }
}
