@import "./colors";
.icon-size{
 width: 20px;
 height: 20px;
 margin-right: 12px;
}
// dxc-select
dxc-select {
  width: 100% !important;
  .container {
    // padding: 0 !important;
    box-shadow: none !important;
    // .searchContainer {
    //   margin-left: 0 !important;
    // }
  }
}
.language-dropdown {
  dxc-select {
    width: 7rem !important;
  }
}
  ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: $gray !important;
      border-radius: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey;
      border-radius: 1px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background-color: $gray !important;
      border-radius: 10px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background-color: $gray !important;
    }
  .disableDiv{
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none !important;
}
.enableDiv{
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
}

.btn-default:hover{
  background-color:$gray-whitesmoke;
}
.btn-default:focus{
  box-shadow: none !important;
}
.font-css{
  font-size: $font-18!important;
  font-weight: 400 !important;
}
dxc-wizard dxc-wizard-step {
  button .stepHeader .validityIcon{
    top: 18.5px;
    left: 18.5px;
  }
.stepSeparator{
  border: none !important;
  border-top: 3px solid $white-gray !important;
}
}
@media only screen and (max-width: 767px) {
  .dropdown-menu-new{
    top:95px !important;
    left: 5rem !important;
  }
 .header-display{
  display:contents !important;
 }
 .product-details{
  height: auto !important;
  width: auto !important;
 }
 .right-border{
  border: none;
  ul{
  border-bottom: 1px solid #dde7ea;
  .fa-angle-right{
    transform: rotate(90deg);
  }
  }
 }
}
.login-button{
  dxc-button{
    button{
      height: 34px !important;
      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
      .mat-button-wrapper{
        img{
          width: 1.5vw !important;
          margin: 0px !important;
          span{
            margin: 0px 4px !important;
          } 
        }
      }
    }
  }
}

dxc-dialog {
  text-align: center;

  .dialogContainer {
    min-height: 15rem !important;
    padding-top: 2rem !important;

    img {
      height: 2rem;
    }

    .dialog-content {
      padding: 2rem 3rem;
    }
  }
}
.removepadding{
.container{
  padding: 0 !important;
  }
}

//after anguler 18 upgrade
dxc-button[ng-reflect-size="fitContent"], dxc-button[size="fitContent"] {
  width: unset !important;
  .dxcButton{
    padding:0px 0.5rem !important;
  }
}
custom-button[size='fitContent']{
dxc-button{
  width: unset !important;
  .dxcButton{
    padding:0px 0.5rem !important;
  }
}
}
custom-button[iconposition='after']{
dxc-button{
  .mdc-button__label{
    span{
      float: left !important;
      padding:0px 5px;
}}
}
}
custom-button[iconposition='before']{
dxc-button{
  .mdc-button__label{
    span{
      padding: 3px;
    }
}
}
}

dxc-button[ng-reflect-icon-position='after'], dxc-button[iconposition='after']{
  .mdc-button__label{
    span{
      float: left !important;
      padding:0px 5px;
}}
}
dxc-button[ng-reflect-icon-position='before'], dxc-button[iconposition='before']{
  .mdc-button__label{
    span{
      padding: 3px;
    }
}
}
  /* Primary mode styles */
  dxc-button[mode='primary'] {

    button {
      background: $purple !important;
      border-radius: 4px;
      color: $white !important;
      .mdc-button__label {
        border-radius: 4px;
        dxc-button-icon {
          img {
            filter: brightness(0) invert(1);
          }
        }
      }
    }
    .mat-mdc-button-disabled{
      .mdc-button__label{
    //  background:rgb(216 212 212 / 29%) !important;
    color: #f5f5f5a3 !important;
    }
    
    }
  }

  dxc-button[mode='secondary'] {
    button.dxcButton:disabled {
      dxc-button-icon {
        img {
          filter: brightness(1) invert(0);
          opacity: 0.4;
        }
      }
    }
    button {
      background-color: $white;
      border: 1px solid $dxc-purple;
      border-radius: 4px;
    }
    &:hover {
      .dxcButton:disabled {
        dxc-button-icon {
          img {
            filter: brightness(1) invert(0);
          }
        }
      }
      .dxcButton:enabled {
        background-color: var(--button-primaryBackgroundColor);
        dxc-button-icon {
          img {
            filter: brightness(0) invert(1);
          }
        }
      }
    }
  }

  dxc-button[mode='text'] {
    button.dxcButton {
      background-color: transparent;
    }
    button.dxcButton:disabled {
      dxc-button-icon {
        img {
          filter: brightness(1) invert(0);
          opacity: 0.4;
        }
      }
    }
    &:hover {
      button.dxcButton {
        background-color: transparent;
      }
    }
  }
  dxc-togglegroup{
    .toggleContainer{
      border-radius: 4px !important;
      .selected{
        color: $white !important;
      }
    }
  }
  dxc-paginator{
    .paginator-container{
      height: 4rem !important;
      dxc-button{
        button{
          border: none !important;
          dxc-button-icon{
            svg{
              width: 0.7rem !important ;
              margin-bottom: 0.5rem;
            }
          }
        }
      }
      dxc-select{
        .collapseIndicator{
          svg{
            height: 14rem !important;
            width: 7rem !important;
          }
        }
      }
      .total-items-container{
        margin: 0 1rem 0px 1rem !important;
      }
    }
  }
  dxc-select{
    div{
      .selectedOption{
        color: black !important;
      }
    .options{
      background-color: $white !important;
      // box-shadow: 0px 1px 1px 0px !important;
      border: 1px solid #80808059 !important
    }
  }
  }
  .errorIcon, .errorMessage, .inputErrorMessage, .inputErrorIcon,.textareaErrorMessage,.errorContainer{
    color: #d0011b !important;
  }
  
  dxc-dialog{
    .backOverlay{
      background-color: #0000004a !important ;
      opacity: 0.8 !important;
    }
    .dialogContainer{
      background-color: $white !important;
      .content{
        overflow-y: unset !important;
      }
    }
    .closeIcon{
      right: 26px !important;
      }
  }
  dxc-checkbox{
    // .mdc-checkbox{
    //   height: 26px !important;
    // }
    vertical-align: middle !important;
    .closeIcon{
    right: 26px !important;
    }
    .mat-mdc-checkbox-checked{
      .mdc-checkbox__background{
        background:#0067b3 !important;
        path{
          color:  $white;
        }
      }
    }
    .mdc-checkbox__background{
      border-color: #0067b3 !important;

    }
  }
  [ng-reflect-disabled='true']{
    .inputContainer,.container, mat-checkbox ,.mat-mdc-input-element,.mat-mdc-form-field-icon-suffix,.mdc-button__label,dxc-toggle{
      opacity: 0.7 !important;
      cursor: not-allowed !important;
      color:black !important;
    }
  }
  dxc-file-input{
    .dragDropArea{
    border: 2px solid !important;
    border-style: dotted !important;
    border-radius: 4px !important;
    dxc-button{
      width: inherit !important;
      font-weight: normal !important;
      color:$dxc-purple !important;
    }
    .dropLabel{
      font-weight:bold !important;
    }
      }
  }