@import '../variables';

button,
input[type='email'],
input[type='tel'],
input[type='text'],
input[type='password'],
input[type='image'],
input[type='submit'],
input[type='button'],
input[type='search'],
textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  outline: none;
}

@mixin _base-container($columnsCount) {
  position: relative;
  display: grid;
  grid-template-columns: repeat($columnsCount, $formColumnWidth);
  column-gap: $formColumnGap;
  justify-content: center;
  padding-left: 24px;
  padding-right: 24px;
  margin-left: -24px;
  margin-right: -24px;
  .ps__rail-y {
    right: -24px !important;
  }

  .mat-form-field .ps__rail-y {
    right: 0 !important;
  }
}

@mixin set-dialog-form($columns) {
  form:not(.mw-skip-form) {
    margin-top: 0;
    margin-bottom: 0;
    grid-template-columns: repeat($columns, $formColumnWidth);

    .mw-form__container {
      grid-column: 1 / -1;
      grid-template-columns: repeat($columns, $formColumnWidth);

      > * {
        grid-column: 1 / -1;
      }
    }

    .mw-form__actions {
      padding-top: 24px;
      grid-column: 1 / -1;
      justify-self: end;

      button {
        margin-right: 0;
        margin-left: 16px;
      }
    }
  }
}

//----------------------------------------------
// Form container
//----------------------------------------------
mw-form-container {
  position: relative;
  padding: 24px 0;
}

.mw-form-container {
  overflow: hidden;
  position: relative;

  @include _base-container(12);

  > *:not(form) {
    grid-column: 1 / -1;
  }

  > form {
    grid-column: 3 / 11;
    grid-row: 1;
    height: 100%;
    overflow: auto;
  }

  //----------------------------------------------
  // Sidebars
  //----------------------------------------------

  &:not(.mw-form-container--sidebar-right):not(.mw-form-container--sidebar-left)
    mw-form-sidebar {
    display: none;
  }

  .mw-form-sidebar {
    grid-row: 1;
    overflow: auto;
    position: relative;

    .mw-form-widget {
      display: block;
      padding: 16px;
    }
  }

  // Sidebar position

  &--sidebar-left {
    .mw-form-sidebar {
      grid-column: 1/5;
      margin-right: 24px;
    }

    > form {
      grid-column: 5 / -1;
      grid-row: 1;
    }
  }

  &--sidebar-right {
    .mw-form-sidebar {
      grid-column: 9/-1;
      margin-left: 24px;
    }

    > form {
      grid-column: 1 / 9;
      grid-row: 1;
    }
  }
}

//----------------------------------------------
// Form common style
//----------------------------------------------
.mw-form-inherit {
  display: inherit;
  grid-template-columns: inherit;
  justify-content: inherit;
  column-gap: inherit;
  position: inherit;
}

form:not(.mw-skip-form),
form .mw-form-section .mw-form-section__content,
.mw-form-inherit {
  @include _base-container(8);

  //----------------------------------------------
  // Form element bottom margins
  //----------------------------------------------
  > * {
    grid-column: 1 / -1;
    &:not(.mw-form-section):not(.mw-form-actions):not(.mw-form-title):not(mat-divider) {
      margin-bottom: 16px;
    }
  }

  .mat-form-field-type-mw-date-picker,
  .mat-form-field-type-mw-time-picker {
    justify-self: left;
  }

  > *:last-child:not(.mw-form-actions) {
    margin-bottom: 24px;
  }

  > .mw-checkbox-group--horizontal,
  > .mw-checkbox-group,
  > .mat-radio-group,
  > .mat-slide-toggle {
    margin-bottom: 24px !important;
  }

  //----------------------------------------------
  // Form description
  //----------------------------------------------
  > p {
    margin-bottom: 32px !important;
    margin-top: 0;
    @include mw-typography(body2);
  }

  //----------------------------------------------
  // Form title
  //----------------------------------------------
  .mw-form-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 32px;
    padding-top: 24px;
  }

  //----------------------------------------------
  // Form fields without labels/hints
  //----------------------------------------------
  .mat-form-field {
    &.mw-no-hint {
      .mat-form-field-wrapper {
        padding-bottom: 0;
      }
      .mat-form-field-underline {
        position: relative;
        bottom: 0;
      }
    }

    &.mw-no-label {
      .mat-form-field-infix {
        margin-top: 0 !important;
      }
    }

    &.mw-just-field {
      @extend .mw-no-hint;
      @extend .mw-no-label;
    }
  }
}

//----------------------------------------------
// Form actions
//----------------------------------------------
.mw-form-actions {
  padding-bottom: 24px;
  &__inner-container {
    margin-top: 8px;
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 16px;
    justify-items: end;
    margin-bottom: 0;
  }

  &__actions-container {
    display: grid;
    column-gap: 16px;
    grid-template-columns: auto auto 1fr;
    justify-items: end;
    grid-column: 1 / -1;
    width: 100%;
  }

  &--sticky {
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 24px;
    background-color: var(--mw-primary-background);
    margin-top: 0;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15),
      0 3px 1px -2px rgba(0, 0, 0, 0.08), 0 2px 2px 0 rgba(0, 0, 0, 0.07);

    .mw-form-actions__actions-container {
      grid-column: 3 / 11;
    }

    &.mw-form-actions--sidebar-left .mw-form-actions__actions-container {
      grid-column: 5/-1;
    }

    &.mw-form-actions--sidebar-right .mw-form-actions__actions-container {
      grid-column: 1/9;
    }
  }

  &--sticky &__inner-container {
    @include _base-container(12);
  }
}

//----------------------------------------------
// Form section
//----------------------------------------------
form .mw-form-section {
  margin-bottom: 0;
  margin-top: 0;

  .mw-form-section-title {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 56px;
    line-height: 56px;
    margin-bottom: 16px;

    mw-arrow-toggler {
      display: flex;
      flex: 1;
      flex-direction: row-reverse;
    }
  }
}

// ----------------------------------------------------------------
// Columns
// ----------------------------------------------------------------
@for $i from 1 through 12 {
  .mw-col-#{$i} {
    grid-column: span $i !important;
    grid-template-columns: repeat($i, $formColumnWidth) !important;
  }

  .mw-col-#{$i}-left {
    grid-column: 1 / #{$i} !important;
  }
}

// ----------------------------------------------------------------
// Dialogs
// ----------------------------------------------------------------
.mat-dialog-container {
  @include set-dialog-form($dialogFormMediumColumnCount);
}

.mw-dialog-large,
.mw-form--large {
  @include set-dialog-form($dialogFormLargeColumnCount);
}

.mw-dialog-medium,
.mw-form--medium {
  @include set-dialog-form($dialogFormMediumColumnCount);
}

.mw-dialog-small,
.mw-form--small {
  @include set-dialog-form($dialogFormSmallColumnCount);
}

// --------------------------------------------------------
// Deprecated part
// --------------------------------------------------------

form:not(.mw-skip-form) .mw-form__container {
  position: relative;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(8, $formColumnWidth);
  grid-column-gap: $formColumnGap;

  > * {
    grid-column: 1 / -1;
  }
}

form.mw-double-section {
  grid-template-columns: repeat(12, $formColumnWidth);
  .mw-form__container {
    grid-template-columns: repeat(6, $formColumnWidth);
    grid-column: span 6;
  }

  .mw-form__actions {
    grid-column: span 12;
  }
}

// --------------------------------------------------------
// Deprecated part (END)
// --------------------------------------------------------