/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

@use 'rose/variables/sizing';
@use 'rose/variables/media';
@use 'rose/utilities/type';

@import 'rose';
@import 'notify';
@import '@hashicorp/ember-asciinema-player';

.rose-layout-global {
  .rose-layout-global-body {
    justify-content: center;
  }
}

.rose-layout-centered {
  > .rose-layout-page {
    width: sizing.rems(l) * 18;
  }

  @media (max-width: media.width(small)) {
    display: block;

    > .rose-layout-page {
      width: auto;
    }
  }
}

.rose-nav-sidebar {
  margin-top: sizing.rems(xxl);

  & + .rose-nav-sidebar {
    margin-top: 0;
  }

  .rose-icon {
    margin-right: sizing.rems(xs);
  }
}

.rose-form {
  &:not(.full-width) {
    width: 66%;
  }

  .rose-form-input {
    width: 100%;

    .rose-form-input-field {
      width: 100%;
    }
  }

  .rose-dropdown {
    $icon-width: sizing.rems(m) + sizing.rems(s);
    $indent: $icon-width + sizing.rems(xs);

    .rose-form-radio-label {
      display: flex;

      .rose-icon {
        padding-right: sizing.rems(xxs);
      }
    }

    .indent-label-1 {
      .rose-form-radio-label,
      .rose-form-checkbox-label {
        padding-left: $indent;
      }
    }

    .indent-label-2 {
      .rose-form-radio-label,
      .rose-form-checkbox-label {
        padding-left: $indent + $icon-width;
      }
    }

    .is-project {
      .rose-icon {
        visibility: hidden;
      }
    }
  }

  .rose-form-fieldset {
    .rose-table {
      .rose-form-label {
        left: -9999px;
        position: absolute;
        top: -9999px;
      }
    }
  }
}

.rose-table {
  p {
    margin-bottom: 0;
  }

  .rose-table-header-cell {
    p {
      color: var(--ui-gray-subtler-1);
      font-weight: normal;
    }
  }

  .rose-form-checkbox {
    margin-bottom: 0;

    .rose-form-checkbox-label-text {
      color: var(--stark);
      text-decoration: underline;
    }
  }
}

.rose-header {
  position: relative;

  .logotype {
    display: none;
  }

  .rose-dropdown {
    .rose-icon {
      transform: scale(0.7);
    }
  }

  &.loading {
    &::after {
      // animation: gradient 1s linear infinite;
      // background: repeating-linear-gradient(
      //   to right,
      //   var(--subtle),
      //   var(--subtle),
      //   var(--info),
      //   var(--subtle),
      //   var(--subtle)
      // );
      background-position: -100% 0;
      background-size: 200% auto;
      content: ' ';
      height: 3px;
      left: 0;
      position: absolute;
      right: 0;
      top: 100%;

      @keyframes gradient {
        0% {
          background-position: -100% 0;
        }

        100% {
          background-position: -200% 0;
        }
      }
    }
  }
}

.rose-frame {
  .rose-form-actions {
    .rose-button-primary {
      display: block;
      margin: 0;
      width: 100%;

      .rose-button-wrapper {
        display: inline;
      }
    }
  }
}

.rose-dialog-cover {
  svg {
    max-width: 20rem;
  }
}

.copyable {
  white-space: nowrap;

  .copyable-button {
    margin: 0;
    padding: 0 sizing.rems(xxs);
    position: relative;
    top: -2px;
  }

  mark {
    animation: fade-background 0.75s linear;
    background-color: transparent;
    color: inherit;

    @keyframes fade-background {
      0% {
        background-color: var(--action-subtler-1);
      }

      100% {
        background-color: transparent;
      }
    }
  }
}

[class*='session-status-'] {
  color: var(--ui-gray-subtler-2);
}

.session-status-active {
  color: var(--success);
}

.nowrap {
  white-space: nowrap;
}

//  Spinning animation for refresh button icon
@media (prefers-reduced-motion: no-preference) {
  .is-loading {
    .rose-icon {
      @keyframes hds-flight-icon-animation-rotation {
        to {
          transform: rotate(360deg);
        }
      }

      > svg {
        animation: hds-flight-icon-animation-rotation 0.7s linear infinite;
      }
    }
  }
}

// Onboarding styles
.create-resources {
  display: flex;
  align-items: flex-start;
  width: sizing.rems(xl) * 15;

  .create-resources-form {
    display: flex;
    justify-content: space-between;
    gap: sizing.rems(s);
  }

  .hds-form-group {
    margin-top: sizing.rems(l);
    justify-content: center;

    .image-container {
      display: flex;
      justify-content: center;
      margin-top: sizing.rems(l);
    }
  }

  .create-resources-item {
    margin-bottom: sizing.rems(xxl);

    .create-resources-item-header {
      display: flex;
      align-items: center;
      align-self: center;
      gap: 8px;
      margin-bottom: sizing.rems(s);

      h3 {
        margin: 0;
      }

      .hds-icon-tile {
        color: var(--token-color-foreground-success);
      }
    }

    .hds-link-standalone {
      margin-bottom: sizing.rems(xs);
    }

    .create-resources-item-controller {
      margin-top: sizing.rems(xl);

      .create-resources-item-controller-label {
        color: var(--ui-gray);
      }

      .create-resources-item-controller-copyable {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
        border-radius: sizing.rems(xxxs);
        color: var(--action);
        height: (sizing.rems(xs) * 5);
        margin: sizing.rems(xxs) 0 sizing.rems(l) 0;

        .copyable {
          display: flex;
          justify-content: space-between;
          padding: sizing.rems(s);

          span {
            display: flex;
          }
        }

        .copyable-button {
          top: 0; // This is to override a negative top declared above
        }
      }

      .image-container > svg {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.worker-create-section {
  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
  border-radius: sizing.rems(xxs);
  margin-bottom: sizing.rems(xl);
  padding: sizing.rems(l);

  > div {
    margin-bottom: sizing.rems(l);
  }

  > code {
    background-color: var(--ui-gray-subtler-5);
    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
    color: var(--failure);
  }

  .worker-auth-token {
    align-items: flex-end;
    display: flex;
    gap: sizing.rems(m);
  }

  .worker-success {
    align-items: center;
    display: flex;
    justify-content: space-between;

    > div {
      align-items: center;
      display: flex;
      gap: sizing.rems(xs);

      p {
        margin-bottom: sizing.rems(xxs);
      }

      &:first-child {
        width: 40%;

        p {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &:last-child {
        p {
          color: var(--success);
        }
      }
    }

    .rose-icon {
      color: var(--success);
    }
  }
}

.info-field {
  .hds-form-field--layout-vertical {
    grid-template-areas: 'label' 'text-input' 'helper-text';

    .hds-form-label {
      font-size: sizing.rems(m);
      grid-area: label;
      line-height: sizing.rems(m) + sizing.rems(xxs);
    }

    .hds-form-text-input {
      background-color: transparent;
      border: 0;
      color: var(--token-form-label-color);
      grid-area: text-input;
      font-size: sizing.rems(m);
      padding: 0;
    }

    .hds-form-helper-text {
      color: var(--token-form-label-color);
      grid-area: helper-text;
    }
  }

  &.has-icon {
    .flight-icon {
      position: absolute;
      transform: translateY(sizing.rems(xl) - sizing.rems(xs));
    }

    .hds-form-helper-text,
    .hds-form-text-input {
      margin-left: sizing.rems(l) + sizing.rems(xs);
    }
  }
}

// json secret editor
.secret-editor {
  // Secret Editor body and gutter colors are based on the Monokai color template
  // and are used for both the Editor and the Skeleton views
  --button-shadow: #000004;
  --secret-editor-body: #272822; // body and button background
  --secret-editor-gutter: #31332b; // gutter background
  --secret-editor-height: 210px;

  background: var(--secret-editor-body);
  border-radius: sizing.rems(xxs);
  height: var(--secret-editor-height);
  margin-bottom: sizing.rems(l);
  width: 100%;

  .secret-editor-json {
    .CodeMirror {
      border-radius: sizing.rems(xxs);
      height: var(--secret-editor-height);
      display: block;
    }

    .CodeMirror-gutters {
      background: var(--secret-editor-gutter);
    }
  }

  .secret-editor-skeleton-wrapper {
    // using ui-gray directly so it does not change when
    // user is in dark mode since the secret editor
    // does not change theme colors between light and dark
    color: var(--token-color-palette-neutral-300);
    display: flex;
    height: 100%;
    position: relative;
  }

  .secret-editor-skeleton-gutter {
    background: var(--secret-editor-gutter);
    border-radius: sizing.rems(xxs) 0 0 sizing.rems(xxs);
    width: sizing.rems(xxl) + sizing.rems(xxs); // 52
  }

  .secret-editor-skeleton-body {
    width: 100%;

    // skeleton text rows for detail and edit views
    // applies general styles to child div of skeleton-body
    // then adds dynamic width to each child
    // depending on the class (e.g., s, m, l)
    > div {
      background: var(--secret-editor-gutter);
      border-radius: sizing.rems(m);
      height: sizing.rems(xs);
      margin: sizing.rems(s) - sizing.rems(xxxxs); // 11

      &:first-child {
        margin-top: sizing.rems(m);
      }

      &.s {
        width: 5%;
      }

      &.m {
        width: 10%;
      }

      &.l {
        width: 15%;
      }

      &.xl {
        width: 20%;
      }
    }
  }

  .secret-editor-skeleton-message {
    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
    left: 50%;
    position: absolute;
    top: 50%;

    // centers message with editor body and gutter
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  .rose-button-secret-editor-skeleton-button {
    background: var(--secret-editor-body);
    border: sizing.rems(xxxxs) solid var(--ui-gray);
    border-radius: sizing.rems(xxxs);
    box-shadow: 0 sizing.rems(xxs) sizing.rems(xxs) var(--button-shadow);

    // using ui-gray directly so it does not change when
    // user is in dark mode since the secret editor
    // does not change theme colors between light and dark
    color: #{color(ui-gray, 050)};
    font-size: sizing.rems(s) + sizing.rems(xxxs); // 14
    height: sizing.rems(xl);
    padding: 0 sizing.rems(l);
  }
}

.ordered-series-diagram {
  --group-title-line-height: 2.25rem;

  width: 100%;
  display: flex;
  margin-bottom: 1rem;

  &-item {
    display: flex;
    margin-top: var(--group-title-line-height);

    &-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    &-title {
      font-weight: var(--token-typography-font-weight-semibold);
      margin-top: 0.5rem;
      width: 4rem;
    }

    &:last-child {
      > .ordered-series-diagram-separator-icon {
        display: none;
      }
    }
  }

  &-group {
    &-content {
      border-radius: 0.5rem;
      padding: 0 0.75rem 0.75rem;
    }

    &-items {
      display: flex;

      & .ordered-series-diagram-item {
        margin-top: 0;
      }
    }

    &-title {
      font-size: var(--token-typography-display-100-font-size);
      line-height: var(--group-title-line-height);
      text-align: center;
    }

    &:last-child {
      > .ordered-series-diagram-separator-icon {
        display: none;
      }
    }
  }

  &-separator-icon {
    color: var(--token-color-foreground-faint);
    margin: 0.75rem 0.5rem;
  }
}

// target worker filters
.target-workers {
  margin-top: sizing.rems(xxl);
  margin-bottom: sizing.rems(xl);

  .hds-form-legend {
    font-size: sizing.rems(l) - sizing.rems(xxs); // 20

    + .hds-form-helper-text {
      margin-bottom: 1rem;
    }
  }

  .hds-alert {
    margin-bottom: sizing.rems(l); // 16
  }

  .migration-wrapper {
    margin: sizing.rems(m) 0 sizing.rems(m) 0;
  }

  // note re Button margin: this is a temp solution,
  // when we migrate buttons to HDS, we will analyze the spacing
  // issue in all scenarios to come up with an efficient solution
  .target-worker-filter {
    width: 100%;

    .hds-form-field--layout-vertical {
      margin-left: 2.5rem;
      width: 50%;
    }

    .hds-form-field--layout-flag {
      margin-bottom: 1rem;
    }
  }

  .worker-diagram {
    min-height: 15rem;

    .ordered-series-diagram {
      min-height: 10rem;
    }
  }
}

.enable-session-recording-toggle {
  width: 50%;
  margin-top: 1.5rem;

  .hds-form-field--layout-vertical,
  .hds-link-standalone {
    margin-left: 2.5rem;
  }

  .hds-link-standalone {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }
}

// target sidebar
.target-sidebar {
  .description {
    color: var(--token-form-helper-text-color);
    font-weight: var(--token-typography-font-weight-normal);
    font-size: var(--token-typography-body-200-font-size);
  }

  .hds-link-standalone {
    margin-top: 1rem;
  }
}

.link-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  text-decoration: none;

  &__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.25rem;
  }

  &__text {
    color: var(--token-color-foreground-primary);
    margin-bottom: 0.25rem;
  }

  .flight-icon-arrow-right {
    color: var(--token-color-foreground-faint);
  }
}

.key-value-list {
  border: 0;

  /* stylelint-disable selector-class-pattern */
  .hds-table__thead {
    .hds-table__th {
      height: auto;
      line-height: 1;
    }
  }

  .hds-table__thead,
  .hds-table__tbody {
    .hds-table__tr {
      // Remove background color on all cells (especially header cells)
      background-color: transparent;
    }

    .hds-table__th,
    .hds-table__td {
      padding: 0.75rem 1rem;

      // Rely on right padding for cell spacing...
      padding-left: 0;

      &:last-child {
        // ...except in the last cell, which doesn't need right padding
        padding-right: 0;

        // Shrink last cell to minimum possible width
        width: 1%;
        white-space: nowrap;
      }

      // Reset field margins to rely instead on cell paddings
      .hds-form-field--layout-vertical,
      .hds-form-text-input {
        margin: 0;
      }
    }
  }
  /* stylelint-enable selector-class-pattern */
}

// secret input field
.secret-input {
  display: flex;
  align-items: flex-end;
  column-gap: 0.5rem;
  position: relative;

  .overlay {
    width: 60%;
    height: 1rem;
    position: absolute;
    bottom: 2.15rem;
    left: 0.25rem;
    border-radius: 0.25rem;
    background-color: var(--token-color-palette-neutral-200);
  }

  .hds-button {
    margin-bottom: 1.5rem;
    flex-basis: 6rem;
  }
}

// session recording player
.session-recording-player {
  --player-background-color: #252937;
  --player-divider: #656a761a;
  --player-white: #fff;
  --player-control-bar-buffer: #656a76;
  --player-play-button: #1060ff;
  --player-play-button-border: #0c56e9;

  background-color: var(--player-background-color);
  border-radius: 0.75rem;

  &-header {
    border-bottom: var(--player-divider) 0.125rem solid;

    // override of button styles to allow for
    // static colors in light and dark mode
    a {
      color: var(--player-white);
      padding: 1rem;
    }

    .hds-button--color-tertiary:hover,
    .hds-button--color-tertiary:active {
      color: var(--player-white);
      background-color: transparent;
      border-color: transparent;
    }
  }

  &-theme {
    .asciinema-theme-asciinema {
      background-color: var(--player-background-color);
    }

    .asciinema-terminal {
      background-color: var(--player-background-color);
      border-color: var(--player-background-color);
      border-width: 1rem;
    }

    .asciinema-player {
      border-radius: 0.75rem;

      // hides large play icon overlay
      .start-prompt {
        display: none;
      }
    }

    .asciinema-player-wrapper {
      &.hud .control-bar {
        bottom: 0;
      }

      .control-bar {
        bottom: -3.625rem;
        background: var(--player-background-color);
        border-top: var(--player-divider) 0.125rem solid;
        height: 3.625rem;

        .playback-button {
          background: var(--player-play-button);
          border: var(--player-play-button-border) 0.063rem solid;
          border-radius: 0.313rem;
          margin: 0.75rem;
          padding: 0.625rem 1rem;

          .icon path {
            fill: var(--player-white);
          }
        }
      }

      .timer {
        font-family: var(--token-typography-body-base-font-family);
        font-size: var(--token-typography-body-base-font-size);
        line-height: var(--token-typography-body-base-line-height);
        color: var(--player-white);
        position: relative;
        top: 40%;
      }

      .progressbar {
        padding-top: 0.875rem;

        .bar .gutter {
          background-color: var(--player-control-bar-buffer);

          span {
            background-color: var(--player-white);
          }
        }
      }

      .fullscreen-button {
        padding-top: 1.5rem;

        .icon path {
          fill: var(--player-white);
        }
      }
    }
  }
}

// Layout - Sidebar
.layout-sidebar {
  display: grid;
  grid-template-areas: 'body body sidebar';
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  gap: 2rem;

  .layout-sidebar-body {
    grid-area: body;
  }

  .layout-sidebar-sidebar {
    grid-area: sidebar;
  }
}

@media (max-width: media.width(large)) {
  .layout-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
      'body'
      'sidebar';
  }
}

// Session recording - List
.session-recording-list-cell-item {
  display: flex;
  gap: sizing.rems(xs);

  span {
    display: flex;
    align-items: center;
  }
}

// Channels by Connection
.channels-by-connection {
  &-connection-header {
    padding: 0.875rem 1rem;
  }
}

// Metadata List
.metadata-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;

  &.vertical {
    flex-direction: column;
    row-gap: 1rem;
  }

  .metadata-list-item {
    display: flex;
    column-gap: 0.3rem;
  }
}