@import (reference) '../extend.less';

.yo-form-page {
  position: relative;

  height: 100%;

  .yo-tab-external-mount {
    display: flex;
    flex-direction: column;

    height: 100%;

    >.ant-tabs {
      >.ant-tabs-nav {
        margin-bottom: 0;
        padding: 0 @padding-md;

        background-color: @component-background;

        &.ant-tabs-card-bar {
          .ant-tabs-nav-container {
            height: @tabs-card-height + @padding-xs;
            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
          }

          .ant-tabs-extra-content {
            padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
          }

          .ant-tabs-tab {
            transition: none;

            .ant-btn();

            &:hover {
              border-color: @btn-default-border;
            }
          }

          .ant-tabs-tab {
            line-height: @btn-height-base;

            margin-right: -1px;
          }

          .ant-tabs-tab-active {
            z-index: 2;

            color: @btn-primary-color;
            border-color: @btn-primary-bg;
            background-color: @btn-primary-bg;

            &:hover {
              color: @btn-primary-color;
              border-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
              background-color: color(~`colorPalette('@{btn-primary-bg}', 5) `);
            }
          }
        }
      }
    }

    >.yo-tab-external-mount-content {
      position: relative;

      flex: 1;

      >.yo-tab-external-tabpane {
        position: absolute;
        top: 0;
        left: 0;

        overflow: auto;

        width: 100%;
        height: 100%;

        &.yo-tab-external-tabpane-inactive {
          pointer-events: none;

          opacity: 0;
        }
      }
    }
  }

  &--bar {
    position: sticky;
    bottom: 0;
    z-index: 200;

    &--with-tab {
      position: absolute;

      display: flex;
      align-items: flex-end;

      width: 100%;
      height: 0;
      padding-right: 7px;

      >.container-fluid {
        width: 100%;
      }

      ~.yo-tab-external-mount {
        >.yo-tab-external-mount-content {
          >.yo-tab-external-tabpane {
            padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
          }
        }
      }
    }
  }

  &--bar-inner {
    display: flex;
    justify-content: space-between;

    padding: @padding-xs @padding-md;

    border: @border-width-base @border-style-base @border-color-split;
    background-color: fade(@component-background, 80%);

    backdrop-filter: blur(5px);

    >:first-child {
      flex: 1;
    }

    .ant-btn {
      margin-left: @padding-sm;
    }
  }

  &--body {
    >.ant-card-body {
      padding: 0;

      >section {
        padding: @padding-lg;

        >h5 {
          padding-left: @padding-md;

          border-left: @padding-xs @border-style-base @primary-color;
        }
      }
    }
  }

  &-layout {
    display: flex;
    flex-direction: column;

    height: 100%;

    &--horizontal {
      flex-direction: row;
    }
  }

  &--header {
    padding: @padding-md 0;

    background-color: @component-background;
  }
}