// global styles regarding angular material

@use 'palette' as pallete;
@use 'buttons' as buttons;
@use 'spaces' as spaces;

.mat-icon {
  width: 15px;
  height: 15px;
  margin: spaces.$space-0 spaces.$space-3;
}

.mat-mdc-button {
  background: transparent;
}

@Keyframes slideFromRight {
  from {
    transform: none;
  }
  to {
    transform: none;
  }
}

.cdk-overlay-pane {
  animation: slideFromRight pallete.$default-transition-time forwards 0s ease-in;
}

.cdk-overlay-container > * {
  transition: all pallete.$default-transition-time;
}

app-message-view {
  --mdc-dialog-supporting-text-line-height: 14px;
  --mdc-dialog-supporting-text-size: 12px;
}

.app-drawer, .confirm, .schema-form {

  .mat-mdc-dialog-container {
    border-radius: 0;

    .mat-mdc-dialog-content, form {
      height: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
    }

  }

  .drawer-header {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .drawer-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: pallete.$main-100;
  }

  .drawer-subtitle {
    color: pallete.$main-60;
    font-size: 14px;
    line-height: 24px;
  }

  .drawer-section-title {
    margin-top: 32px;
    margin-bottom: 4px;
    color: pallete.$main-100;
    font-size: 14px;
    font-weight: 500;
  }

  .drawer-section-subtitle {
    font-size: 12px;
    line-height: 20px;
    color: pallete.$main-60;
  }

  textarea {
    width: 100%;
    background: pallete.$main-0;
    border: 1px solid pallete.$main-20;
    border-radius: pallete.$default-border-radius;
    line-height: 24px;
    font-size: 14px;
    color: pallete.$main-100;
    height: 24px;
    margin-top: 4px;
    padding: 8px;
  }

  textarea {
    min-height: 250px;
  }

  input:hover, input:focus-visible, textarea:hover, textarea:focus-visible {
    border: 1px solid pallete.$main-40;
    outline: none;
    transition: all pallete.$default-transition-time;
  }

  .actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    button {
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
      padding: 8px 12px;
      border-radius: pallete.$default-border-radius;

      cursor: pointer;
    }

    .action-button-white {
      @include buttons.button-white;
    }

    .action-button-black {
      @include buttons.button-black;
    }

    .action-button-blue {
      @include buttons.button-blue;
    }

    .action-button-black:disabled, .action-button-blue:disabled {
      @include buttons.button-disabled;
    }
  }

  .close {
    font-size: 28px;
    margin: 0;
    cursor: pointer;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type=number] {
    -moz-appearance: textfield;
  }
}

snack-bar-container.snackbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: pallete.$main-0;
  font-size: 14px;
  font-weight: 500;
  padding: 16px 24px;
}

.snackbar-success::before {
  font-family: 'Material Symbols Outlined';
  content: '\ef76';
  margin-right: 16px;
  color: pallete.$blue-50;
  font-size: 24px;
}

.snackbar-error::before {
  font-family: 'Material Symbols Outlined';
  content: '\e000';
  margin-right: 16px;
  color: pallete.$red-50;
  font-size: 24px;
}

app-custom-snack-bar {
  display: flex;
  height: auto;
  min-height: 20px;
}

.mat-select-search-inner {
  border-bottom-color: lightgrey;
}

.mat-select-panel {
  // angular material styles select panel through 'style' attribute, hence the 'importants'
  background: white;
  min-width: 100% !important;
  transform: translate(0px, 44px) !important;
}

.select-limit-panel {
  transform: translate(0px, -44px) !important;
}

.mat-select-panel .mat-active.mat-option.mat-selected:not(.mat-option-multiple) {
  background: pallete.$blue-0;
  color: pallete.$blue-60;
  font-weight: 500;
}

.mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
  background: pallete.$blue-0 !important;

  .mdc-list-item__primary-text {
    color: pallete.$blue-60 !important;
    font-weight: 500 !important;
  }
}

.mat-select-panel:not([class*=mat-elevation-z]) {
  box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
}

.mat-option-text {
  font-weight: 500;
}

.mat-form-field-underline {
  display: none;
}

.mat-form-field-appearance-legacy .mat-form-field-label-wrapper {
  padding: 0;
}

.mat-form-field-appearance-legacy div.mat-form-field-wrapper {
  padding: 0;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
  border: 0;
  padding: 0;
}

.mat-select-trigger {
  padding: 8px 12px;
}

.mat-select-trigger {
  align-items: baseline !important;
}

.mat-divider-vertical {
  border-right-color: pallete.$main-20 !important;
  height: pallete.$default-line-height !important;
}

.servers {
  .mat-mdc-select-trigger {
    padding-left: 48px !important;
  }
}


.mat-mdc-form-field-infix {
  height: 40px;
  padding: 10px 0 !important;
  min-height: auto !important;
  font-size: 14px;
  line-height: 24px;
  z-index: 1;
}

.mdc-notched-outline {
  height: 40px !important;
  background: pallete.$main-0;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading {
  border-color: pallete.$main-20 !important;
  border-top-left-radius: pallete.$default-border-radius;
  border-bottom-left-radius: pallete.$default-border-radius;
  border-left: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: pallete.$main-20 !important;
  border-top-right-radius: pallete.$default-border-radius;
  border-bottom-right-radius: pallete.$default-border-radius;
  border-right: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: #F1405DDD !important;
}

.mat-mdc-form-field-subscript-wrapper {
  display: none;
}

mat-form-field:hover {
  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: pallete.$main-40 !important;
    transition: all pallete.$default-transition-time;
  }

  .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading {
    border-color: pallete.$main-40 !important;
    transition: all pallete.$default-transition-time;
  }
}

.mat-focused {
  .mdc-notched-outline {
    outline: none;
    transition: all pallete.$default-transition-time;
    border-radius: pallete.$default-border-radius !important;
    box-shadow: 0 0 3px 1px pallete.$blue-60;
  }
}

.mdc-list-item__primary-text {
  flex-grow: 1;
}

.mat-mdc-option {
  line-height: 40px !important;
  min-height: 40px !important;
}

.mdc-text-field__input::-webkit-calendar-picker-indicator {
  display: block !important;
}

.filter-input {
  .mdc-notched-outline__leading {
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

.filter-input {
  .mdc-notched-outline__trailing {
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
  }
}

.wrapper-select {
  .mdc-notched-outline {
    background: pallete.$main-10;
  }
}

.transparent-select {
  .mat-mdc-select-value {
    color: #B0B0B0 !important;
  }
}

.filter-input {
  .mat-mdc-text-field-wrapper {
    padding: spaces.$space-0 spaces.$space-3;
  }
}

.autocomplete-field {
  .mdc-notched-outline {
    height: 42px !important;
  }
}

.mat-mdc-table-sticky-border-elem-left {
  border-right: 1px solid pallete.$main-20;
}

.mat-mdc-row:hover {
  background: pallete.$main-10 !important;
  cursor: pointer;
}

.mat-focus-indicator {
  position: unset !important;
}

.mat-mdc-table {
  &.resizing {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: col-resize;
  }

  .mat-mdc-cell {
    span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .mat-mdc-header-cell {
    position: relative;

    &:not(:last-child) {
      .resize-holder {
        cursor: col-resize;
        width: 20px;
        height: 100%;
        position: absolute;
        right: -10px;
        top: 0;
        z-index: 1;
      }
    }
  }
}

.default-table-header {
  background: pallete.$main-10 !important;
}

.white-table-header {
  background: pallete.$main-0 !important;
}

mat-option > span {
  margin: 0 15px 0 0;
}

.status-preparingrebalance {
  color: #be7b00;
}

.status-completingrebalance {
  color: #be7b00;
}

.status-stable {
  color: pallete.$green-50;
}

.status-dead {
  color: pallete.$red-50;
}

.status-empty {
  color: pallete.$main-40;
}

.common-radio-button {
  .mdc-form-field {
    height: 64px;
    border: 1px solid pallete.$main-30;
    border-radius: 8px;
    margin-right: spaces.$space-0;
    width: 100%;

    label {
      width: 100%;
    }
  }
}

.mat-mdc-tab-body-content {
  overflow: hidden !important;
}

.mat-expansion-panel-spacing {
  margin: 0 !important;
}

.mat-expansion-panel:not([class*=mat-elevation-z]){
  box-shadow: none !important;
  border: 1px solid pallete.$main-20;
  border-radius: 8px !important;
}
