@use 'variables' as variables;

:root {
  --app-background-color: #{variables.$color-light-stronger};
  --app-topbar-height: #{variables.$height-top-bar};
  --app-layout-padding-bottom: #{variables.$padding-bottom-page};
  --app-layout-padding-left: #{variables.$padding-left-page};
  --app-layout-padding-right: #{variables.$padding-right-page};
  --app-layout-padding-top: #{variables.$padding-top-page};

  // z-index
  --app-zindex-topbar: 1000;

  --app-topbar-logo-width: var(--custom-topbar-logo-width, calc(#{variables.rhythm(16)}));

  // Extended font sizes (beyond pastanaga-angular's --font-size-xxl: 24px)
  --font-size-xxxl: #{variables.$font-size-base * 2}; // 32px
}

html,
body {
  height: 100%;
}

body {
  background-color: var(--app-background-color);
}

.close-button {
  position: absolute;
  right: 0;
  top: 0;
}

code {
  font-weight: variables.$font-weight-semi-bold;
}
pre > code {
  font-weight: variables.$font-weight-regular;
}

code.endpoint {
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.pa-popup {
  min-width: variables.rhythm(16);
}

pa-button.full-width {
  display: flex;

  .pa-button {
    flex: 1 0 auto;
  }
}

// Adds a visible border to icon-only pa-button[aspect=basic] buttons.
// Apply class="icon-bordered" on the <pa-button> host element.
pa-button.icon-bordered .pa-button {
  border: 1px solid var(--color-neutral-lighter) !important;
  border-radius: 50%;
}

.page-spacing {
  min-height: calc(100vh - var(--app-topbar-height));
  padding: var(--app-layout-padding-top) var(--app-layout-padding-right) var(--app-layout-padding-bottom)
    var(--app-layout-padding-left);
  position: relative;

  .page-title {
    @include variables.display-s();
    align-items: center;
    display: flex;
    gap: variables.rhythm(1);
    margin-bottom: variables.rhythm(1);
  }
  .page-description {
    @include variables.body-m();
    color: variables.$color-neutral-regular;
  }
}

ul.nsi-list {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    background: variables.$color-neutral-lightest;
    cursor: pointer;
    display: flex;
    gap: variables.rhythm(1);
    justify-content: space-between;
    line-height: variables.rhythm(5);
    padding-right: variables.rhythm(1);
    text-transform: capitalize;
    transition: background variables.$transition-hint;

    .action-buttons-container {
      display: flex;
      align-items: center;

      pa-button {
        height: variables.rhythm(4);
        opacity: 0;
        transition: opacity variables.$transition-hint;
      }
    }

    &:not(:last-of-type) {
      box-shadow: inset 0 -1px 0px variables.$color-neutral-light;
    }

    &:hover {
      background: variables.$color-neutral-lighter;
    }

    &.selected {
      background: variables.$color-dark-stronger;
      color: variables.$color-light-stronger;
    }

    &.selected,
    &:hover {
      .action-buttons-container pa-button {
        opacity: 1;
      }
    }
  }
}

pa-table.header-above .pa-table-grid--head .pa-table-grid--header {
  z-index: 1;
}

.separator-line {
  background-color: variables.$color-neutral-lighter;
  height: 1px;
  width: 100%;
}
.separator-word {
  color: variables.$color-neutral-regular;
  text-transform: lowercase;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: variables.rhythm(2);

  &.small-gap {
    gap: variables.rhythm(1.5);
  }

  .label-field-container {
    display: flex;
    flex-direction: column;
    gap: variables.rhythm(1);
  }
}

.inline-form {
  align-items: center;
  display: flex;
  gap: variables.rhythm(2);

  &.small-gap {
    gap: variables.rhythm(1);
  }
  &.full-width > *:not(span) {
    flex: 1 0 auto;
    max-width: 50%;
  }
  &:not(.full-width) {
    flex-wrap: wrap;
  }
}

.container-with-border {
  border: 1px solid variables.$color-neutral-lighter;
  border-radius: variables.rhythm(1);
  padding: variables.rhythm(2);
}

a.accent-link {
  color: variables.$color-text-link-accent;

  &:hover {
    color: variables.$color-text-link-accent-hover;
  }
}

pa-tab.unauthorized {
  align-items: center;
  display: flex;

  li {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }
}
pa-radio.unauthorized,
pa-checkbox.unauthorized,
pa-toggle.unauthorized {
  align-items: center;
  display: flex;
  gap: variables.rhythm(1);
  justify-content: space-between;

  .pa-toggle {
    flex: 1 0 auto;
  }
}
pa-toggle.unauthorized {
  padding-right: variables.rhythm(1);
}
.beta-option {
  align-items: center;
  display: flex;
  gap: variables.rhythm(1);
  pa-radio {
    flex: 1 0 auto;
    max-width: calc(100% - #{variables.rhythm(5)} - #{variables.rhythm(0.5)});
  }
}
pa-option pa-icon {
  display: flex;
}

.pa-modal .pa-modal-footer.pa-dual-buttons {
  justify-content: center;

  pa-button {
    min-width: variables.rhythm(16);
    width: unset;
  }
}

// Info dropdowns: remove max-width cap and allow text to wrap.
// Apply class="info-dropdown" on the <pa-dropdown> host element.
pa-dropdown.info-dropdown .pa-popup-wrapper {
  max-width: 420px;
  min-width: 280px;
}

pa-dropdown.info-dropdown .pa-option-content {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
