// stylelint-disable no-descending-specificity
@import '~@alauda/ui/theme/var';

@mixin fixed-form-container {
  margin-bottom: $fixed-form-footer-height;
}
@mixin fixed-form-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: calc(100% - #{$nav-menu-main-panel-expanded-width});
  height: $fixed-form-footer-height;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: $color-white;
  @include shadow-2;
}
@mixin array-form-table {
  .acl-array-form-table {
    flex: 1;
    width: 100%;
    border-spacing: 0;
    background: #fafafa;

    th,
    td {
      word-break: break-all;
      vertical-align: top;
      padding: 4px;
      line-height: 24px;
      &:first-child {
        padding-left: 8px;
      }
      &:last-child {
        padding-right: 8px;
      }
    }
    th {
      height: 32px;
      text-align: left;
      font-weight: 400;
      &[required]:before {
        content: '*';
        color: $color-error;
        margin-right: 4px;
      }
    }

    thead {
      background-color: #f0f0f0;
    }

    tbody {
      tr:first-of-type > td {
        padding-top: 8px;
      }
      tr:last-of-type > td {
        padding-bottom: 8px;
      }
    }

    /* We have a convention here that the last column is the action column */
    td.acl-array-form-table__action-col {
      text-align: right;
      white-space: nowrap;
      width: 36px;
      min-width: 36px;
      vertical-align: middle;
      .aui-button--text.isPlain {
        font-size: 16px;
        aui-icon {
          cursor: inherit;
        }
        &:not([disabled]):not(:hover) {
          color: #999;
        }
      }

      /* customized style */
      .action-col__vertical {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    /* customized style */
    td.acl-table-form-error-hint {
      padding-top: 0;
      color: $color-error;
      font-size: 12px;
    }

    &__bottom-control-buttons {
      display: flex;
      width: 100%;
      border-top: none;

      .aui-button {
        flex: 1;
        border-style: dashed;

        &--default:not(:hover) {
          border-color: #333;
        }
      }
    }

    &:not(.acl-array-form-table--no-row-separator)
      > tbody
      > tr.acl-array-form-table--row-group-start:not(:first-of-type)
      td {
      border-top: 1px dashed $table-row-border-color;
    }
  }
}

@mixin inline-select {
  display: inline-flex;
  align-items: center;
  border: 1px solid $color-text-placeholder;
  padding-left: 8px;

  &:hover {
    border-color: $color-primary;
  }

  > label {
    font-size: $font-size-regular;
    color: $color-text-help;
    white-space: nowrap;
  }

  aui-select .aui-input {
    border: 0;
    height: $input-medium-height - 2;
  }
}

@mixin sticky-header($top) {
  position: sticky;
  z-index: 1;
  top: $top;
}

@mixin sticky-table-header($top) {
  > .aui-table > .aui-table__header-row {
    @include sticky-header($top);
  }
}
