@import 'wiki-ui.data';

@mixin simple-table {
  border-collapse: collapse;
  min-width: 100%;
  border: 1px solid;
  border-color: var(--color-gray-eee, #eee);

  td,
  th {
    padding: 8px;
    border: 1px solid;
    border-color: var(--color-gray-eee, #eee);
  }

  th {
    font-weight: 500;
    background-color: var(--theme-hack-bg-color, #f4f5f7);
  }
}

@mixin host {
  position: relative;

  display: flex;
  flex-flow: column;

  width: 60vw;
  max-width: 1200px;
  height: 60vh;
  max-height: 1200px;

  .header {
    margin-bottom: 0 !important;

    /* Переопределяем инлайн свойства директивы */

    & > wg-documentation-link {
      margin-left: auto;
    }
  }

  .content {
    display: flex;
    flex-flow: row;
    flex-grow: 99;
    padding: 0 !important;

    /* Переопределяем инлайн свойства директивы */

    .form {
      @include form;
    }

    .preview {
      @include preview;
    }
  }
}

@mixin form {
  scrollbar-gutter: stable;

  display: flex;
  flex-flow: column;
  flex-basis: 400px;

  min-width: 300px;
  padding: 20px;

  h2 {
    @include form-h2;
  }

  label:not(wg-field label) {
    @include form-label;

    &.required {
      @include form-asterisk;
    }
  }

  div.button-group {
    @include form-button-group;
  }

  div.color-group {
    @include form-color-group;
  }

  .margin-before {
    margin-top: 12px;
  }

  .margin-after {
    margin-bottom: 12px;
  }

  p.fade {
    @include form-p-fade;
  }

  .error {
    @include form-error;
  }
}

@mixin form-h2 {
  display: inline-flex;
  justify-content: space-between;

  margin: 0;

  font-size: 16px;
  font-weight: 600;
}

@mixin form-label {
  cursor: default;
  user-select: none;

  margin-top: 12px;

  font-size: small;
  color: var(--color-gray-888);
}

@mixin form-error {
  cursor: default;
  user-select: none;

  font-size: small;
  color: var(--color-alert-red);
}

@mixin form-p-fade {
  cursor: default;
  user-select: none;

  margin-top: 3px;

  font-size: small;
  color: var(--color-gray-aaa, $gray);
}

@mixin form-asterisk {
  &::after {
    content: '*';
    color: $red;
  }
}

@mixin form-button-group {
  display: flex;
  flex-flow: row nowrap;
  column-gap: 4px;
  justify-content: normal;

  min-height: 32px;
  margin-top: 6px;

  background-color: none;

  button {
    cursor: pointer;

    display: flex;
    flex-flow: row nowrap;
    flex-basis: 100%;
    flex-grow: 1;
    column-gap: 6px;
    align-items: center;
    justify-content: center;

    padding: 1px 16px;

    color: $black;

    background-color: $lightGray;
    border: none;
    border-radius: 3px;

    transition: background-color 0.05s ease;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $darkGray;
    }
  }

  button:hover {
    background-color: $gray;
  }

  button.selected {
    cursor: default;
    color: white;
    background-color: $darkGray;

    .icon {
      color: white;
    }
  }
}

@mixin form-color-group {
  display: flex;
  flex-flow: row nowrap;
  column-gap: 6px;
  justify-content: normal;

  .color-button {
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border: $border;
    border-radius: 3px;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .icon.border-left {
      margin-left: 6px;
      border-left: $border;
    }

    &.color-light > .icon {
      color: $darkGray;
    }

    &.color-picker {
      position: relative;
      justify-content: flex-end;
      width: 48px;
      padding: 0;
    }
  }
}

@mixin preview {
  overflow-x: hidden;
  display: flex;
  flex: 1;
  flex-flow: column;

  border-left: $border;

  .preview-header {
    display: flex;
    width: 100%;
    padding: 20px;
    border-bottom: $border;

    button {
      display: flex;
      flex-flow: row;
      row-gap: 6px;

      padding: 0;

      font: var(--default-text-font);
      font-family: var(--default-font-family);
      font-weight: 600;
      font-style: normal;
      color: var(--color-gray-222);

      .refresh-icon {
        display: flex;
        align-items: center;
        margin-right: 5px;

        &.refresh-icon-rotate {
          @include rotate;
        }
      }

      &.borderless {
        @include button-borderless;
      }
    }
  }

  .preview-content {
    scrollbar-gutter: stable;

    display: flex;
    flex-flow: column;
    flex-grow: 1;

    padding: 20px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@mixin rotate {
  animation: 3s linear infinite rotate;
}

@mixin button-borderless {
  cursor: pointer;
  user-select: none;

  background: none;
  border: none;

  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.7;
  }
}