@import "mixins";

:root {
  --global-ngxlib-control-gap: 1em;
  --global-ngxlib-control-radius: 4px;
  --global-ngxlib-control-padding: 0.5em 0.7em;
  --global-ngxlib-control-focus-outline: none;
  --global-ngxlib-control-placeholder-color: #999;

  --global-ngxlib-button-disabled-opacity: 0.4;

  --global-ngxlib-button-color: #000;
  --global-ngxlib-button-color-hover: #333;
  --global-ngxlib-button-bg: #ccc;
  --global-ngxlib-button-bg-hover: transparent;
  --global-ngxlib-button-border-color: #ccc;

  --global-ngxlib-button-primary-color: #fff;
  --global-ngxlib-button-primary-color-hover: #0d6efd;
  --global-ngxlib-button-primary-bg: #0d6efd;
  --global-ngxlib-button-primary-bg-hover: transparent;
  --global-ngxlib-button-primary-border-color: #0d6efd;

  --global-ngxlib-button-secondary-color: #fff;
  --global-ngxlib-button-secondary-color-hover: #198754;
  --global-ngxlib-button-secondary-bg: #198754;
  --global-ngxlib-button-secondary-bg-hover: transparent;
  --global-ngxlib-button-secondary-border-color: #198754;

  /*--global-ngxlib-button-border-color: #444;
  --global-ngxlib-button-color: #444;
  --global-ngxlib-button-color-hover: #fff;
  --global-ngxlib-button-bg: #4441;
  --global-ngxlib-button-bg-hover: #444;*/

  /*--global-ngxlib-button-primary-border-color: #0d6efd;
  --global-ngxlib-button-primary-color: #0d6efd;
  --global-ngxlib-button-primary-color-hover: #fff;
  --global-ngxlib-button-primary-bg: #0d6efd33;
  --global-ngxlib-button-primary-bg-hover: #0d6efd;

  --global-ngxlib-button-secondary-border-color: #198754;
  --global-ngxlib-button-secondary-color: #198754;
  --global-ngxlib-button-secondary-color-hover: #fff;
  --global-ngxlib-button-secondary-bg: #19875433;
  --global-ngxlib-button-secondary-bg-hover: #198754;*/

  --global-ngxlib-input-border-color: #ddd;
  --global-ngxlib-input-bg: #fff;
  --global-ngxlib-input-disabled-color: #999;
  --global-ngxlib-input-disabled-bg: #f5f5f5;
  --global-ngxlib-input-readonly-bg: #f5f5f5;
}

html, body {
  line-height: 1.3;
  font-family: Arial, sans-serif;
}

// :not([class^="ql-"]) - exclude ngx-quill buttons
button:not(.custom):not([mat-icon-button]):not([mat-button]):not([mat-flat-button]):not([mat-raised-button]):not(mat-stroked-button):not(mat-mini-fab):not(mat-fab):not([class^="ql-"]):not([class*="tox-"]) {
  @include var(padding, ngxlib-control-padding, global);
  @include var(background-color, ngxlib-button-bg, global);
  @include var(color, ngxlib-button-color, global);
  @include var(border-color, ngxlib-button-border-color, global);
  @include var(border-radius, ngxlib-control-radius, global);
  border-style: solid;
  border-width: 1px;
  transition: 250ms;

  &.primary-button {
    @include var(color, ngxlib-button-primary-color, global);
    @include var(background-color, ngxlib-button-primary-bg, global);
    @include var(border-color, ngxlib-button-primary-border-color, global);
  }

  &.secondary-button {
    @include var(color, ngxlib-button-secondary-color, global);
    @include var(background-color, ngxlib-button-secondary-bg, global);
    @include var(border-color, ngxlib-button-secondary-border-color, global);
  }

  &:hover:not(:disabled) {
    @include var(background-color, ngxlib-button-bg-hover, global);
    @include var(color, ngxlib-button-color-hover, global);
    &.primary-button {
      @include var(background-color, ngxlib-button-primary-bg-hover, global);
      @include var(color, ngxlib-button-primary-color-hover, global);
    }
    &.secondary-button {
      @include var(background-color, ngxlib-button-secondary-bg-hover, global);
      @include var(color, ngxlib-button-secondary-color-hover, global);
    }
  }

  &:disabled {
    cursor: not-allowed;
    @include var(opacity, ngxlib-button-disabled-opacity, global);
  }

  &:focus {
    @include var(outline, ngxlib-control-focus-outline, global);
  }
}

input:not([type="radio"]):not([type="checkbox"]):not(.custom):not([matInput]),
select:not(.custom):not([matInput]),
textarea:not(.custom):not([matInput]) {
  @include var(padding, ngxlib-control-padding, global);
  @include var(border-radius, ngxlib-control-radius, global);
  border-style: solid;
  border-width: 1px;
  @include var(background, ngxlib-input-bg, global);
  @include var(border-color, ngxlib-input-border-color, global);

  &::placeholder {
    @include var(color, ngxlib-control-placeholder-color, global);
  }

  &:disabled {
    @include var(color, ngxlib-input-disabled-color, global);
    @include var(background-color, ngxlib-input-disabled-bg, global);
  }

  &:not(select):read-only {
    @include var(background-color, ngxlib-input-disabled-bg, global);
  }

  &:focus {
    @include var(outline, ngxlib-control-focus-outline, global);
  }
}

input[type="checkbox"] {

}

label {
  &.checkbox-label {
    cursor: pointer;
  }
}

.form-row {
  padding: var(--global-ngxlib-control-gap) 0;
  display: flex;
  align-items: center;
  gap: 1em;
  button, select, .control, .control-row {
    &:not(.custom) {
      min-width: min-content;
      max-width: 100%;
      flex: 1 1 0;
    }
  }
  input:not([type="checkbox"]):not([type="radio"]) {
    &:not(.custom) {
      min-width: 0;
      max-width: 100%;
      flex: 1 1 0;
    }
  }
  .control {
    label {
      display: block;
      width: 100%;
      margin: var(--global-ngxlib-control-gap) 0;
    }
    input:not([type="checkbox"]):not([type="radio"]), button, select {
      &:not(.custom) {
        display: block;
        width: 100%;
        margin: var(--global-ngxlib-control-gap) 0;
      }
    }
  }
  .control-row {
    display: flex;
    align-items: center;
    label {
      margin: 0 var(--global-ngxlib-control-gap) 0 0;
    }
  }
  &.single-element-row {
    display: block;
    label {
      display: block;
      margin: 0 0 var(--global-ngxlib-control-gap) var(--global-ngxlib-control-gap);
    }
    input, button, select, textarea {
      &:not(.custom) {
        display: block;
        width: 100%;
        margin: var(--global-ngxlib-control-gap) 0 0 0;
      }
    }
  }
}

h1 {
  margin: 1em 0 0.7em 0;
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
}

h2 {
  margin: 1em 0 0.7em 0;
  font-weight: bold;
  font-size: 1.2rem;
}

form {
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  max-width: 100%;
}

.extra-small-screen, .small-screen, .medium-screen, .wide-screen {
  width: 600px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.extra-small-screen {
  width: 400px;
}

.small-screen {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 600px;
}

.medium-screen {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 800px;
}

.wide-screen {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 1200px;
}

.error-text {
  color: #f00;
}

.align-center {
  text-align: center;
}

.clickable-link {
  text-decoration: underline;
  cursor: pointer;
}

.icon-close {
  cursor: pointer;
  &:not(.white) {
    @include icon-close(20px, 3px, #000);
  }
  &.white {
    @include icon-close(20px, 3px, #fff);
  }
}