styles.scss

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use "@angular/material" as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$cookster-primary: mat.define-palette(mat.$indigo-palette);
$cookster-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$cookster-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$cookster-theme: mat.define-light-theme(
  (
    color: (
      primary: $cookster-primary,
      accent: $cookster-accent,
      warn: $cookster-warn,
    ),
  )
);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($cookster-theme);

/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;
  overflow-y: auto;
}
body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

:root {
  --primary: hsla(105, 100%, 25%, 1);
  --background-color: hsla(105, 100%, 98%, 1);
  --background-color-semi-transparent: hsla(105, 100%, 98%, 0.8);
  --background-color-gradient: linear-gradient(
    90deg,
    rgba(247, 255, 245, 0) 0%,
    rgba(247, 255, 245, 0.75) 10%,
    rgba(247, 255, 245, 0.85) 20%,
    rgba(247, 255, 245, 0.85) 80%,
    rgba(247, 255, 245, 0.75) 90%,
    rgba(247, 255, 245, 0) 100%
  );
  --text-color: hsla(105, 100%, 10%, 1);
  --tint-very-light: hsla(105, 100%, 95%, 0.5);
  --tint1: hsla(105, 100%, 90%, 1);
  --tint2: hsla(105, 70%, 80%, 1);
  --tint3: hsla(105, 70%, 70%, 1);
  --tint4: hsla(105, 70%, 60%, 1);
  --tint5: hsla(105, 70%, 50%, 1);
  --tint6: hsla(105, 70%, 40%, 1);
  --tint7: hsla(105, 70%, 30%, 1);
  --tint7: hsla(105, 100%, 20%, 1);
  --gray: hsla(105, 0%, 90%, 1);
}

.full-recipy-dialog {
  .mat-dialog-container {
    padding: 0;
    color: var(--text-color);
  }
}

.add-recipy-dialog {
  .mat-dialog-container {
    padding: 20px;
    color: var(--text-color);
    background: var(--background-color);
  }
  .mat-stepper-horizontal,
  .mat-stepper-vertical {
    background: var(--background-color);
    font-family: "Montserrat", sans-serif;
    color: var(--text-color);
  }
}

h1 {
  font-size: 24px;
  margin: 0;
}

h3 {
  font-size: 16px;
  margin: 0;
}

button.action-button {
  background-color: var(--tint1);
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  &:not(:disabled) {
    border: 1px solid var(--tint4);
  }
}

button.secondary-button {
  background-color: transparent;
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  &:not(:disabled) {
    border: 1px solid var(--tint2);
  }
}

select.inline-select {
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
}

.mat-chip.mat-standard-chip {
  border-radius: 4px;
  min-height: 18px;
  font-size: 10px;
  color: var(--text-color);
  height: auto;
  padding: 2px 13px 3px;
  background-color: var(--tint1);
  border: 1px solid var(--tint2);
  margin: 2px !important;
}

// ----- Mat-menu --- //

.mat-menu-panel {
  background-color: var(--background-color);
  border-radius: 2px;
  min-height: 0 !important;
}

.mat-menu-content:not(:empty) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  background-color: var(--background-color);
  border-radius: 2px;
}

button.mat-menu-item {
  width: 100%;
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
  height: 30px;
  line-height: 20px;
}

// --- Scrollbar --- //
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-color) #f5f5f5;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--tint2);
  background-color: var(--tint1);
}

.cdk-global-scrollblock {
  overflow-y: auto;
}

// ---- Admin-panel

.admin-panel {
  min-height: 70vh;
  .admin-header {
    display: flex;
    justify-content: space-between;
  }
  .mat-form-field {
    width: 13rem;
    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
  }

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: 0 0 0.44rem 0;
    border-top: 0.69rem solid transparent;
  }

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-suffix {
    top: 0.38rem !important;
    color: var(--text-color);
  }

  ::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper {
    padding-bottom: 0.75rem;
    margin: 0 !important;
  }

  table {
    width: 100%;
    tr.mat-row,
    tr.mat-header-row {
      height: 2.88rem;
    }
    th {
      color: #97999b;
    }
    td {
      color: black;
    }
    th,
    td {
      font-size: 0.81rem;
      line-height: 1.25rem;
      font-family: "Montserrat", sans-serif;
    }

    .table-actions,
    .table-id {
      min-width: 80px;
    }
  }

  button.mat-flat-button {
    font-size: 0.75rem;
    line-height: 0.94rem;
    padding-inline: 0.5rem;
    height: 30px;
  }

  ::ng-deep .mat-paginator {
    position: relative;
  }

  ::ng-deep div.btn_custom-paging-container {
    .mat-icon-button {
      margin: 0.13rem 0.63rem 0;
      font-size: 0.75rem;
      &:last-of-type {
        display: none;
      }
    }
  }

  ::ng-deep .mat-paginator-range-actions {
    position: absolute;
    left: 1.5rem;
    .mat-paginator-icon {
      width: 1rem;
    }
  }

  ::ng-deep .cdk-overlay-pane {
    max-width: 90vw !important;
  }

  ::ng-deep .mat-progress-spinner {
    position: absolute !important;
    left: 47%;
    top: 45%;
    circle {
      stroke: var(--primary);
    }
  }
}

// -- Forms

.mat-form-field {
  font-family: "Montserrat", sans-serif;
}

.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 2px 0 0 2px !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0 2px 2px 0 !important;
}

.mat-form-field-appearance-outline .mat-form-field-outline {
  top: 0.75em !important;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: 0.5em 0 1em 0;
}

.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent
  .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent
  .mat-ripple-element {
  background: var(--primary);
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background: var(--primary);
}

.edit-input {
  border-bottom: 1px solid var(--text-color) !important;
  max-width: 50px !important;
  text-align: right !important;
}

// --- Auth-forms

.auth-form-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 72px);
  form {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tint2);
    padding: 40px 70px 60px;
    box-shadow: 0px 0px 4px 0px var(--tint4);
    margin-bottom: 72px;
    h1 {
      margin-bottom: 25px;
    }
    .action-button {
      width: 100%;
    }
  }
}

// ---- Ingredients

.ingredient-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.ingredient-name {
  flex-grow: 1;
}

.ingredient-amount {
  text-align: end;
  width: max-content;
  display: flex;
  align-items: center;
}

// --- Buttons

.edit-button {
  height: 23px;
  line-height: 23px;
  width: 24px;
  font-size: 5px;
  margin-left: 5px;
  .mat-icon {
    height: 13px;
  }
}

.tag-button {
  position: absolute !important;
  right: 0;
  bottom: 0;
  mat-icon {
    width: 16px;
  }
}

.info-icon {
  font-size: 16px;
  color: var(--tint3);
}

// --- Stepper

.mat-step-header .mat-step-icon-selected,
.mat-step-header .mat-step-icon-state-done,
.mat-step-header .mat-step-icon-state-edit {
  background-color: var(--primary);
}

.mat-drawer-container {
  height: 100%;
}

// --- Slider

.mat-slider.mat-accent .mat-slider-track-fill,
.mat-slider.mat-accent .mat-slider-thumb,
.mat-slider.mat-accent .mat-slider-thumb-label {
  background-color: var(--primary);
}

//-- checkbox

.mat-primary .mat-pseudo-checkbox-checked,
.mat-primary .mat-pseudo-checkbox-indeterminate {
  background-color: var(--primary);
}

@media (max-width: 600px) {
  html,
  body {
    font-size: 14px;
  }

  .mat-chip-list-wrapper {
    justify-content: space-between;
  }

  .mat-chip.mat-standard-chip {
    border-radius: 2px;
    flex-grow: 1;
    min-height: 30px;
    justify-content: center;
    font-size: 12px;
  }

  .recipies-bottomsheet .mat-bottom-sheet-container {
    height: 80vh;
  }

  .page-container {
    padding-top: 9vh;
  }
}

.mat-button-toggle-group {
  position: fixed !important;
  bottom: 0;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  background: var(--background-color);
  z-index: 10;
}

.mat-button-toggle {
  height: 98%;
  display: flex;
  font-family: "Montserrat", sans-serif;
  flex-grow: 1;
  &.mat-button-toggle-checked {
    background-color: var(--primary);
    border-radius: 2px;
    color: var(--background-color) !important;
    font-weight: 500 !important;
  }
}

.margin-block-medium {
  margin-block: 20px;
}