@use 'apps/dashboard/src/variables' as *;
@use 'edit-resource.tokens' as tokens;

.edit-resource {
  header {
    $gap-header-buttons: rhythm(1);
    $button-size: rhythm(5);

    align-items: center;
    background: $color-neutral-lightest;
    display: flex;
    height: tokens.$height-header;
    justify-content: space-between;
    padding: 0 calc(var(--app-layout-padding-right) - #{rhythm(1)}) 0 var(--app-layout-padding-left);
    position: sticky;
    top: 0;
    z-index: 100;

    .header-left-block {
      align-items: center;
      display: flex;
    }

    .navigation-buttons {
      display: flex;
      gap: $gap-header-buttons;
    }

    .title-s {
      flex: 1 0 auto;
      padding-left: rhythm(9);
      padding-right: rhythm(1);
      max-width: calc(
        100vw - #{$width-side-panel} - var(--app-layout-padding-left) - ($button-size * 3) - ($button-size * 5) - var(--app-layout-padding-right)
      );
    }

    .actions {
      align-items: center;
      display: flex;
      gap: $gap-header-buttons;
    }
  }
  .page-container {
    display: flex;
    gap: rhythm(0.5);
    min-height: calc(100vh - var(--app-topbar-height) - #{tokens.$height-header});
    padding: var(--app-layout-padding-top) var(--app-layout-padding-right) var(--app-layout-padding-bottom)
      var(--app-layout-padding-left);

    nav {
      flex: 0 0 auto;
      position: relative;
      top: -#{rhythm(2)};
      width: rhythm(24);

      h4 {
        margin: 0;
      }

      ul {
        padding: 0;
        position: sticky;
        top: tokens.$sticky-top;
      }

      li.nav-item {
        align-items: center;
        cursor: pointer;
        display: flex;
        gap: rhythm(1);
        padding: rhythm(1) rhythm(1.5);

        pa-icon {
          display: flex;
        }

        &.active {
          cursor: default;
          font-weight: $font-weight-semi-bold;
          padding-right: rhythm(5);
        }

        &:not(.active):hover {
          background: $color-neutral-lightest;
        }

        .error-marker {
          color: $color-secondary-strong;
        }

        .field-menu {
          position: absolute;
          right: rhythm(1);
        }
      }

      .generated-fields {
        display: block;
        h4 {
          padding: rhythm(1.5) rhythm(1.5) 0;
        }
      }
    }

    .page-content {
      flex: 1 1 auto;

      footer {
        background: $color-light-stronger;
        bottom: 0;
        box-shadow: tokens.$footer-separator;
        display: flex;
        max-width: tokens.$width-page-content;
        padding: tokens.$padding-vertical-footer 0;
        position: sticky;
        z-index: 100;

        &.form-buttons,
        .save-actions {
          gap: rhythm(1);
        }
        &.form-field-buttons {
          justify-content: space-between;
        }

        .save-actions {
          display: flex;
        }
      }
    }
  }
}
