@use "src/app/styles/font" as *;
@use "src/app/styles/variables" as *;
@use "src/app/styles/sidebar" as sidebar;

.mat-mdc-list-base {
  border-bottom: 1px solid $gray-80;
  width: 100%;
  padding-bottom: 16px;

  &:last-child {
    border-top: 1px solid $gray-80;
  }

  & .mat-mdc-list-item {
    display: flex;
    cursor: pointer;
    width: auto;
    padding: 0 16px;
    font-size: $fs-small;
    height: 45px;
    --mat-list-list-item-label-text-size: #{$fs-small};
    --mat-list-list-item-label-text-weight: #{$fw-normal};
    --mat-list-list-item-label-text-line-height: 20px;
    --mat-list-list-item-label-text-tracking: 0;
    --mat-list-list-item-leading-icon-start-space: 0;
    --mat-list-list-item-leading-icon-end-space: 24px;

    .mat-icon.mat-mdc-list-item-icon {
      margin-right: 0;
    }

    &.active {
      outline: none;
    }

    &:focus {
      outline: none;
    }
  }
}

.mat-icon {
  margin-right: 24px;
  font-size: $fs-large;
  color: sidebar.$sidebar-icon-color;
  padding: 0;
}


.sidebar-title {
  color: sidebar.$sidebar-title-color;
  font-size: $fs-small;
  text-transform: uppercase;
  margin-top: 24px;
  margin-left: 36px;
  margin-bottom: 16px;
}

.mat-mdc-list-base .mat-mdc-list-item.ui-element {
  padding-left: 40px;
}

.circle {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: sidebar.$sidebar-circle-color;
  margin-left: 20px;
}

.project-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 24px;
  margin-left: 0;

  &_yellow {
    background-color: $yellow;
  }

  &_blue {
    background-color: $blue;
  }

  &_pink {
    background-color: $pink;
  }
}

.project-item p {
  margin: 0;
}


.mat-tree-item {
  display: flex;
  cursor: pointer;
  padding-left: 33px;
  justify-content: space-between;
  width: 100%;
  height: 45px;
  align-items: center;

  & div {
    display: flex;
    align-items: center;

    & p {
      margin: 0;
      & .mat-badge-content {
        width: auto;
        min-width: 16px;
        padding: 0 5px;
        border-radius: 32px;
        top: -6px;
        right: -22px;
        line-height: 16px;
        height: 16px;
        font-size: 12px;
        font-weight: $fw-normal;
      }
    }
    .nodejs-sup {
      .mat-badge-content {
        right: -46px;
      }
    }
  }

  &>mat-icon {
    display: none;
  }
}

.help-link {
  color: inherit;
  text-decoration: none;

  &:visited,
  &:hover,
  &:active,
  &:focus {
    color: inherit;
    text-decoration: none;
  }
}

.mat-node {
  &:hover {
    & .mat-tree-item {
      & mat-icon {
        display: block;
      }
    }
  }
}

mat-tree-node {
  min-height: 45px;
  outline: none;

  &:hover {
    cursor: pointer;
    background-color: sidebar.$sidebar-background-color-hover;
  }
}

mat-tree-node[aria-expanded="true"] {
  & .mat-tree-item {
    & mat-icon {
      display: block;
    }
  }
}

.mat-tree-second-item {
  display: flex;
  align-items: center;

  & div {
    margin-right: 20px;
  }

  & p {
    margin: 0;
  }
}

.rotateUp {
  transform: rotate(180deg);
  transition: transform .3s linear;
}

.rotateDown {
  transform: rotate(0deg);
  transition: transform .3s linear;
}

.add-section-wrapper, .chat-section-wrapper {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  margin-bottom: -8px;
}

.chat-section-wrapper {
  padding: 8px 16px 16px 0;
}

.add-icon-wrapper, .chat-icon-wrapper {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: $pink;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 24px 0 12px;
}

.chat-icon-wrapper {
  width: 45px;
  height: 45px;
  background-color: $blue;
  margin-right: 8px;
  margin-left: 0;
}

.add-icon, .chat-icon {
  color: $white;
  margin: 0;
}

.add-section-title, .chat-section-title {
  margin: 0;
}

.add-section-menu {
  background-color: $light-blue;
  padding: 24px;
  //.blueTheme, .mat-input-element {
  //  caret-color: #9013FE !important;
  //}
  //.form-field, .mat-focused  {
  //  color: red;
  //  caret-color: #9013FE !important;
  //}
}

//
//::ng-deep .form-field.mat-focused .mat-form-field-underline {
//  //display: none;
//  color: #31C2A0;
//}
//
//
//::ng-deep .form-field input {
//  caret-color: red;
//  color: yellow;
//}
//
//.mat-form-field-ripple {
//  background-color: yellow !important;
//}
//
//.mat-form-field.mat-focused .mat-form-field-ripple {
//  background-color: #69f0ae !important;
//}

.menu-title {
  font-size: $fs-normal;
  color: $white;
  //caret-color: $yellow;
  margin: 0;
}

.form-field {
  color: $white;
}

//.mat-form-field.mat-focused .mat-form-field-label {
//  color: #00D318 !important;
//}

.menu-buttons-wrapper {
  display: flex;
  justify-content: flex-end;
}

.menu-button {
  box-shadow: none;

  & + .menu-cancel-button {
    margin-left: 5px;
  }
}

.menu-cancel-button {
  box-shadow: none;

  &:hover {
    background-color: #8B9BFF;
  }
}

.space {
  margin-bottom: 240px;
}
