// .cdk-global-scrollblock {
//   overflow: hidden !important;
// }

@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, 800);
    color: mat-color($primary, default-contrast);
  }
  .bg-accent-dark {
    background: mat-color($accent, B200);
    color: mat-color($primary, default-contrast);
  }
  .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);
  }
  ///// gnb
  .gnb .mat-toolbar {
    background-color: $gray-ref0;
  }

  .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);
  }

  .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, 700);
    cursor: pointer;
  }

  .load-container .loader:after {
    background-color: mat-color($accent, 300);
  }

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

  .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);
    }
  }
  $pixels-amount: 0;
  .mat-form-field-infix {
    padding: $pixels-amount;
    border-top: $pixels-amount;
  }
  //login input... ////////////////////
  .idpass-type {
    .mat-form-field-empty {
      &.mat-form-field-label {
        top: 11px;
      }
    }
    .mat-form-field-can-float {
      &.mat-form-field-should-float {
        .mat-form-field-label {
          top: 11px;
          width: 0;
        }
      }
    }
    .mat-form-field {
      &.mat-focused {
        .mat-form-field-label {
          opacity: 0;
        }
      }
    }
  }
  // input
  .ucap-mat-input-container {
    .mat-form-field-empty {
      &.mat-form-field-label {
        top: 11px;
      }
    }
    .mat-form-field-can-float {
      &.mat-form-field-should-float {
        .mat-form-field-label {
          top: 11px;
          width: 0;
        }
      }
    }
    .mat-form-field {
      &.mat-focused {
        .mat-form-field-label {
          opacity: 0;
        }
      }
      .mat-form-field-wrapper {
        padding-bottom: 0;
        .mat-form-field-infix {
          align-self: center;
          width: inherit;
          padding: 0;
        }
      }
    }
  }
  //////////////////// login input...//
  //panel /////////////////////////////
  .panelType {
    @include ucapMatExpansionPanel(60px, 0 0 0 0, 1, 0);
  }
  ///////////////////////////// panel//
  //btn //////////////////////////////
  .btnType {
    .mat-fab .mat-button-wrapper {
      padding: 16px 0;
      display: inline-block;
      line-height: 24px;
      .mat-icon {
        background-repeat: no-repeat;
        display: inline-block;
        fill: currentColor;
        height: 24px;
        width: 24px;
      }
    }
  }
  ////////////////////////////// btn//

  .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;
  }

  .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;
  }

  //[S]탭개수에 의한 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;
    }
  }
  //[E]탭개수에 의한 width 정의

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

  //[S]mat-tab-group
  /*mat-tab-group {
    display: flex;
    flex-direction: row;
    .mat-tab-header {
      width: 100%;
      .mat-tab-label-container {
        width: 100%;
      }
    }
  }*/

  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 {
          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;
    }
  }

  //설정 general-theme
  .theme-list {
    .mat-tab-header {
      width: 100%;
      border: none !important;
      .mat-tab-labels {
        position: relative;
        width: 100%;
        flex-direction: row !important;
        .mat-tab-label {
          width: 140px;
          height: 120px;
          &.mat-tab-label-active {
            opacity: 1;
          }
          .mat-tab-label-content {
            position: relative;
            flex-flow: column;
            width: 100%;
          }
        }
      }
    }
  }
  //[E]mat-tab-group

  nav[mat-tab-nav-bar][vertical] {
    display: flex;
    flex-direction: row !important;

    .mat-tab-links {
      display: flex;
      flex-direction: column !important;
    }
  }

  .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);
    }
  }

  //[S]대화 말풍선 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;
          }
        }
      }
    }
    &.me {
      .message-main {
        .bubble {
          background-color: #ffffff;
          border: 1px solid mat-color($primary, 300);
          .event-info {
            border-radius: 0 0 0 6px;
          }
        }
      }
    }
  }
  //[E]대화 말풍선 global 적용

  //[S]스티커
  .sticker-selector {
    .mat-tab-header {
    }
  }
  //[E]스티커

  //[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;
      }
    }
  }
  .translation-preview {
    background-color: mat-color($accent, 900, 0.8);
  }
  //[E] 번역

  .mat-calendar {
    mat-calendar-header {
      .mat-calendar-header {
        .mat-calendar-controls {
          margin: 0;
        }
      }
    }
  }
  .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);
    }
  }

  /////////2020
  //color
  .color-white {
    color: $white;
  }
  //mat chip
  .mat-chip {
    &.mat-standard-chip {
      background-color: mat-color($accent, A400);
      color: mat-color($primary, default-contrast);
      .mat-chip-remove {
        //color: rgba(0, 0, 0, 0.87);
        color: mat-color($primary, default-contrast);
      }
    }
  }
  .mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
    background-color: mat-color($accent, 700);
    cursor: pointer;
  }

  //mat checkbox
  .mat-checkbox-inner-container {
    width: 18px !important;
    height: 18px !important;
    background-color: #fff;
  }
  .mat-checkbox-checked {
    &.mat-accent {
      .mat-checkbox-background {
        border: 2px solid mat-color($accent, 700);
        background-color: #fff;
        border-radius: 2px;
        .mat-checkbox-checkmark-path {
          stroke: mat-color($accent, 700) !important;
        }
      }
    }
  }

  //mat dadge
  .mat-badge-accent .mat-badge-content,
  .weblink .mat-badge-content {
    background-color: mat-color($warn, 500);
    border: 1px solid mat-color($warn, 500);
  }
  .noti-sum {
    .mat-badge-content {
      right: 16px !important;
      bottom: 12px !important;
      min-width: 22px;
      width: auto;
      line-height: 20px;
      align-items: center;
      padding: 0 5px;
      border-radius: 11px;
    }
  }
  //mat-card
  .allim-card {
    .mat-card-header {
      margin-bottom: 0;
      .mat-card-header-text {
        margin: 0 0 0 10px;
        .mat-card-title {
          line-height: 21px;
          height: 21px;
          @include font-family(LG Smart Light, normal);
          font-size: 16px !important;
          font-weight: bold;
          color: $brown;
          margin-bottom: 3px;
        }
        .mat-card-subtitle {
          line-height: 14px;
          @include font-family(LG Smart Light, normal);
          font-size: 12px;
          color: $gray-re9;
          margin-top: 0;
          margin-bottom: 18px;
        }
      }
    }
    .mat-card-content {
      border-top: solid 1px #d4d4d4;
      margin-bottom: 0;
      min-height: 114px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      color: #d4d4d4;
      font-size: 12px;
    }
    & > .mat-card-actions:last-child {
      margin-left: -17px;
      margin-right: -17px;
      margin-bottom: 0 !important;
      padding: 0;
    }
  }

  //mat ico font
  .material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }

  //mat ico btn (Mini Fab(36*36) Buttons)
  .mat-mini36-fab {
    line-height: 32px;
    width: 36px;
    height: 36px;
    .mat-button-wrapper {
      line-height: 20px !important;
      .mat-icon {
        height: 20px;
        width: 20px;
        &.material-icons-outlined {
          font-size: 20px;
        }
      }
    }
  }

  //mat tree
  .tree-has-child {
    display: flex;
    align-items: center;
    min-height: 36px;
    flex: 1;
    word-wrap: break-word;
    li {
      width: 100%;
      .tree-node-body {
        display: flex;
        flex-direction: row;
        align-content: center;
        background-color: mat-color($accent, 100);
        border: 1px solid mat-color($accent, 200);
      }
    }
  }
  .group-list-box {
    .mat-tree-node {
      &:first-of-type {
        li {
          .user-list {
            &.line-top {
              border-top: 0;
              background-color: $grayf7-a;
              border-bottom: 1px solid $gray-rec;
            }
          }
        }
      }
    }
  }

  //mat slide toggle
  .mat-slide-toggle {
    .mat-slide-toggle-bar {
      width: 32px;
      height: 18px;
      border-radius: 9px;
      border: 1px solid #707070;
      background-color: #fff;
      .mat-slide-toggle-thumb-container {
        width: 12px;
        height: 12px;
        top: 2px;
        left: 2px;
        .mat-slide-toggle-thumb {
          height: 12px;
          width: 12px;
          box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
            0px 1px 1px 0px rgba(0, 0, 0, 0.14),
            0px 1px 3px 0px rgba(0, 0, 0, 0.12);
          background-color: #999;
        }
      }
    }
    &.mat-checked {
      .mat-slide-toggle-bar {
        background-color: #fff;
        border: 1px solid #fd578a;
        .mat-slide-toggle-thumb-container {
          transform: translate3d(14px, 0, 0);
          .mat-slide-toggle-thumb {
            background-color: #e42f66;
          }
        }
      }
    }
  }

  // Btn Float
  .btn-main-float {
    right: 22px !important;
    bottom: 60px !important;
    .bg-accent-dark {
      //background: mat-color($accent, 600);
      color: mat-color($primary, default-contrast);
      width: 64px;
      height: 64px;
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
      background-image: linear-gradient(143deg, #e97466 21%, #eb2d67 57%);
      &:hover {
        background-color: $lipstick;
        background-image: none;
      }
      .mat-button-wrapper {
        padding: 10px 0;
        line-height: 44px;
        .mat-icon {
          height: 44px;
          width: 44px;
          font-size: 44px;
        }
      }
    }
  }
}
