@use '@angular/material' as mat;
@import 'fonts';
@import 'material';

.ql-toolbar {
  direction: ltr;
}
.ql-editor {
  direction: rtl;
  text-align: right;
  white-space: pre-wrap !important;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  --primary-color: #3F51B5;
  --accent-color: #FF4081;
  --warn-color: #F44336;
  --black-color: #222;
  font-family: Farhang;
  height: 100%;

  h1.page-title {
  	margin-top: 1rem;
    margin-bottom: 2rem;
    font-size: 1.3rem;

    .status-indicator {
      display: inline-block;
      width: 24px;
      height: 24px;
      margin-left: 10px;
      padding-top: 4px;
      vertical-align: middle;
      background: var(--primary-color);
      font-size: 60%;
      text-align: center;
    }
  }
}

.toolbar-spacer {
  flex: 1 1 auto;
}

.page {
  display: block;
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px 0;
}

code {
  display: inline-block;
  direction: ltr;
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.lat {
  direction: ltr;
  text-align: left;
}

.sup {
  vertical-align: super;
  font-size: smaller;
}

img {
  max-width: 100%;
}

.full-width {
  display: block;
  width: 100%;
}

.button-group {
  [mat-button] {
    min-width: 30px;
    height: 100%;

    &:not(:first-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:not(:last-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}

mat-dialog-container h2.title {
  font-size: 24px;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 10px
}

.select-hack.mat-form-field-appearance-legacy .mat-form-field-wrapper {
  padding-bottom: 33px;
}
.spacer {
  height: 30px;
}

.layout {
  display: flex;

  &.horizontal {
    input[matInput] {
      height: 17px;
    }

    &>.spacer {
      width: 30px;
    }
  }

  &.padded > * {
    &:not(:first-child) {
      margin-right: 10px;
    }
  }

  .flex {
    flex: 1;
  }

  .flex-2 {
    flex: 2;
  }
}

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

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

.row-actions {
  padding-top: 10px;
}

.section-actions {
  position: relative;
  text-align: left;
  margin-top: 20px;

  &:before {
    content: ' ';
    position: absolute;
    top: -2px;
    left: 0;
    width: 300px;
    height: 2px;
    background-color: #A0A0A0;
  }

  .mat-mdc-button-base.mdc-icon-button {
    --mdc-icon-button-state-layer-size: 24px;
    --mdc-icon-button-icon-size: 14px;
    padding: 0;
    margin: 0 5px;
    vertical-align: top;
    overflow: hidden;

    .mdc-button__label {
      line-height: 24px;
    }
  }
}

table {
  width: 100%;

  th.mat-header-cell.centered {
    text-align: center;

    .mat-sort-header-container {
      justify-content: center;
    }
  }

  td.centered {
    text-align: center;
  }

  .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 24px;
    --mdc-icon-button-icon-size: 14px;
    padding: 0;
  }
}

.loading-wrapper {
  opacity: 0;
  transition: opacity .2s;

  &.active {
    opacity: 1;
  }
}

.edittable-field {
  .view-mode {
    cursor: pointer;
  }
}

mat-spinner.mat-progress-spinner.small {
  display: inline-block;
  width: 20px !important;
  height: 20px !important;

  svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.id-cell {
  color: #555;
  text-transform: uppercase;
  font-family: "Courier New", "Courier";
  font-size: 10px;
}

quill-editor {
  display: flex;
  min-height: 300px;
  flex-direction: column;

  .ql-container {
    flex: 1;

    .ql-editor {
      font-family: Farhang;
      line-height: 200%;
      text-align: justify;
      font-size: 16px;
      white-space: initial;
    }
  }
}
page.note-edit quill-editor .ql-editor u {
  padding: 0 10px;
  text-decoration: none;
  background-color: #FF4081;
  color: white;
  border-radius: 3px;
}

h3.collapsible-section-title {
  cursor: pointer;
  display: flex;
  color: #3F51B5;
  border-bottom: 1px dashed #808080;

  .title {
    display: flex;
    flex: 1;
  }

  .icon {
    transition: transform .4s;

    &.openned {
      transform: rotate(-90deg);
    }
  }
}

[dir="ltr"] {
  text-align: left !important;
}