@import '../../../../style/global-parameters.scss';

.default-drawer {
  .ant-drawer-body {
    .oio-form {
      & > .oio-row > .oio-col > .oio-default-group {
        & > .oio-group-title-wrapper {
          padding: var(--oio-padding) 0 0 0;
        }

        & > .oio-group-content {
          padding: var(--oio-padding) 0;
        }
      }
    }
  }

  .ant-drawer-content .ant-drawer-wrapper-body {
    .ant-drawer-body {
      padding-bottom: 24px;
    }

    .ant-drawer-footer {
      padding: 0;

      .default-drawer-pre-next-switch-footer {
        display: flex;
        align-items: center;

        .oio-simple-pagination {
          padding-left: var($parameterPrefix + -margin-md);
        }

        .action-bar {
          flex: 1;
        }
      }

      .action-bar {
        height: unset;
        padding: var($parameterPrefix + -margin-md);
        justify-content: flex-end;

        button {
          &.ant-btn {
            margin: unset;
          }
        }
      }

      .default-drawer-footer {
        padding: var($parameterPrefix + -margin-md);
      }
    }
  }

  .oio-drawer-content {
    height: 100%;

    & > .oio-default-view {
      height: 100%;
    }
  }

  &-table:not(.oio-drawer-modal-mode)
    .ant-drawer-content
    .ant-drawer-wrapper-body
    .ant-drawer-body
    > .ant-spin-nested-loading
    > .ant-spin-container {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}

/**
 * workflow drawer style
 */
.flowDrawerWrap {
  .ant-drawer-content {
    background: var(--oio-background);

    .ant-drawer-header {
      background: var(--oio-background);
      border-color: var(--oio-border-color);
      padding: 16px;

      .ant-drawer-header-title {
        flex-direction: row-reverse;
      }

      .ant-drawer-close {
        color: var(--oio-icon-color);
        margin-right: 0;
      }

      .ant-drawer-title {
        color: var(--oio-text-color);
      }
    }

    .ant-drawer-wrapper-body {
      .ant-drawer-body {
        padding: 16px 16px 70px 16px;

        .oio-form {
          .oio-group {
            border: none;
            box-shadow: none;
          }

          .oio-group-title-wrapper {
            padding: 24px 0 16px 0;
            height: inherit;
          }

          .oio-group-content {
            padding: 0 0 24px 0;

            .oio-group-title-wrapper {
              padding-top: 0;
            }

            .oio-group-title {
              font-size: 14px;

              &:before {
                border-left: none;
                margin-right: 0;
              }
            }

            .oio-group-content {
              border-bottom: none;
              padding: 0;
            }
          }

          .oio-tabs .oio-tab > .oio-tab-content > .oio-row > .oio-col,
          & > .oio-row > .oio-col {
            & > .oio-default-group > .oio-group-title-wrapper {
              padding-top: 0;
            }

            &:last-child > .oio-default-group > .oio-group-content {
              padding-bottom: 0;
              border-bottom: none;
            }
          }

          &.ant-form-vertical {
            .oio-form-item-horizontal {
              .ant-form-item-label {
                flex-basis: unset;
                height: 32px;
                text-align: left;

                & > label {
                  height: 32px;
                }
              }

              .ant-form-item-control {
                max-width: unset;

                .form-bool-switch {
                  height: 32px;
                  justify-content: flex-start;
                }
              }
            }
          }
        }

        .widget-container {
          font-size: 14px;
        }
      }

      .footer-btn {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid var(--oio-border-color);
        background: var(--oio-background);
        text-align: right;
        z-index: 1;
        height: 71.5px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        box-sizing: border-box;

        button {
          padding: 9px 16px;
          height: auto;
          font-size: 14px;
          margin-bottom: 0;
        }
      }
    }
  }

  .drawer-container {
    .ant-drawer-header {
      .ant-drawer-title {
        .ant-drawer-close {
          .oio-drawer-close-icon {
            font-weight: normal;
          }
        }
      }

      .ant-drawer-header-title {
        flex-direction: row-reverse;
      }

      > .ant-drawer-close {
        opacity: 0;
      }
    }
  }
}