@import '../variables.scss';

.field-container {
    padding: 10px;

    mat-icon {
        margin-bottom: -16px;
        cursor: pointer
    }

    .material-symbols-outlined {
        font-size: 16px;
        vertical-align: text-top;
        margin: 0px 3px 0 -18px;
    }
}

.mobile-dialog {
    .mat-mdc-form-field {
        width: 230px;

        @media (min-width: 992px) {
            width: 400px;
        }
    }
}

.mobile-short {
    .mat-mdc-form-field {
        width: 100%;

        @media (min-width: 992px) {
            width: 400px;
        }
    }
}


.mat-mdc-form-field{
    width: 300px;

    @media (min-width: 992px) {
        width: 400px;
    }
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
    border-bottom-color: var(--icon) ;
    border-width: 2px;
}

.mat-mdc-select-arrow svg {
    top: unset;
    left: unset;
    transform: unset;
    right: -8px;
}


.mat-mdc-form-field {
    --mat-form-field-state-layer-color: transparent ;
    --mdc-filled-text-field-active-indicator-color: #c0c0c0;
    --mdc-filled-text-field-hover-active-indicator-color: #c0c0c0;
  }





