@use 'variables' as *;
@use '../theme/theme-mode-variables' as *;
@use 'mixins' as *;

/********** Fonts **********/
.p-component, .p-component .p-component, textarea {
  font-family: 'Open Sans', sans-serif;
}

/* Force PrimeNG 20 components to use custom fonts */
.p-component,
.p-component * {
  font-family: 'Open Sans', sans-serif !important;
}

.p-inputtext,
.p-button,
.p-dropdown,
.p-select,
.p-multiselect,
.p-autocomplete,
.p-calendar,
.p-inputnumber {
  font-family: 'Open Sans', sans-serif !important;
}

/********** Base **********/
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: $fontFamily !important;
  font-size: $fontSize;
  font-weight: normal;
  color: $default-text-color;
  overflow: hidden;
  min-height: 100%;
  background-color: var(--background-secondary-color, #f5f5f5);
}

router-outlet {
  display: none !important;
  height: auto !important;
}

h1,
.h1 {
  font-weight: normal;
  margin: 0;
  font-size: 24px;
}

h2,
.h2 {
  font-size: 20px;
  font-weight: normal;
  margin: 0;
}

a,
.link {
  color: $default-btn-link-text-color;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
}

.gateway-icon-action {
  transition:
    background-color $transitionDuration ease-in-out,
    color $transitionDuration ease-in-out;
}

.gateway-more-settings-link {
  align-items: center;
  color: var(--text-brand, $default-btn-link-text-color);
  display: inline-flex;
  font-weight: 600;
  gap: 4px;
  line-height: 18px;

  &:hover {
    color: var(--accent-brand-300, $default-btn-link-text-color-darker);
  }
}

.gateway-more-settings-indicator {
  font-weight: 700;
}

label {
  line-height: 25px;

  &.required:after {
    color: $input-txt-sensitive-color;
    content: ' ●';
    font-style: normal;
  }

  &.bold-label {
    color: var(--input-txt-border-focus-color);
    font-family: $fontFamilyBold;
    font-size: 13px;
    font-weight: 600;
  }
}

textarea {
  line-height: 1.5;
  padding: 5px;
  resize: vertical;

  @include custom-scrollbar();
}

markdown {
  white-space: normal;

  p {
    white-space: pre-wrap;
  }
}

.text-primary {
  color: var(--default-text-color);
}

.text-secondary {
  color: var(--secondary-label-text-color);
}

.text-tertiary {
  color: rgba(var(--base-color-rgb), 0.4);
}

.text-ellipsis {
  @include text-ellipsis();
}

form label {
  font-size: 12px;
  font-weight: 400;
  font-family: $fontFamilyBold;
  color: $default-text-color;
}

pre {
  border-radius: $borderRadius;
  padding: 10px;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background-color: $code-bg-color !important;
  color: #fff;
}

.code-toolbar {
  position: relative;

  .toolbar {
    position: absolute;
    right: 20px;
    top: 10px;

    button {
      color: $action-btn-icon-color;
      background-color: transparent;
      opacity: 0;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 0;
      border: none;
      cursor: pointer;

      transition: all $transitionDuration ease-in-out;

      &:before {
        font-size: 25px;
        font-family: devolutions-icons;
        content: "\e94c";
      }

      &:hover {
        color: $action-btn-hover-bg-color;
      }
    }
  }

  &:hover {
    .toolbar button {
      opacity: 1;
    }
  }
}

ul.unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 25px;
}


.separator {
  height: 25px;
  border-left: 1px solid var(--menu-separator-color);

  &.horizontal {
    border-left: none;
    border-bottom: 1px solid var(--menu-separator-color);
  }
}

/********** Placeholder **********/
::-webkit-input-placeholder {
  color: $lighter-default-text-color
}

:-moz-placeholder {
  color: $lighter-default-text-color
}

::-moz-placeholder {
  color: $lighter-default-text-color
}

:-ms-input-placeholder {
  color: $lighter-default-text-color
}

/********** Inputs **********/
[hidden] {
  display: none !important;
}

.disabled, .p-label-disabled {
  opacity: .3;
  cursor: none;
  pointer-events: none;
}

.sensitive-data {
  color: $input-txt-sensitive-color !important;
}

mark, .highlighted {
  background-color: $input-txt-highlight-color;
  color: $default-text-theme-color;
}

.p-spinner {
  width: 100%
}

.p-corner-all {
  border-radius: $borderRadius;
}

.p-disabled:not(.p-steps-item),
.p-component:disabled,
button:disabled {
  opacity: .4;
  border-color: $input-txt-border-disabled-color !important;
  cursor: not-allowed !important;
}

input, textarea, select, .p-dropdown, .p-multiselect {
  background: $input-txt-bg-color;
  border-radius: $borderRadius;
  border: 1px solid $input-txt-border-color;
  color: $input-txt-color;
  font-size: 14px;
  font-family: $fontFamily;
  line-height: 24px;
  padding: 5px 0 5px 8px;
  transition: border-color 0.3s ease 0s;
  width: 100%;

  &:disabled {
    border-color: $input-txt-border-disabled-color;
    opacity: .3;
  }

  &.p-dropdown, &.p-multiselect {
    padding: 0;
  }

  &.ng-invalid.ng-touched {
    border-color: $input-txt-border-error-color;
  }

  &:enabled:hover:not(.p-state-error):not(.ng-invalid) {
    border-color: $input-txt-border-hover-color;
  }

  &:enabled:focus:not(.p-state-error):not(.ng-invalid) {
    box-shadow: 0 3px 6px 0 $input-txt-shadow-color;
    border-color: $input-txt-border-focus-color;
  }
}

select {
  @include custom-scrollbar();
}

input::-ms-clear,
input::-ms-reveal {
  display: none;
}

// Needs to overwrite browser default styles because of
// setEntryActionsTemplates behavior where it flashes a bg color
// on the entries actions buttons
button {
  transition: none;

  background-color: transparent;
  color: inherit;
  font-family: $fontFamily !important;
}

// For "goto" button
.navigate-to-button {
  display: inline-block;
  cursor: pointer;
  color: var(--grid-icon-color);
  font-size: 24px;
  background: none;
  border: none;
  transform: scaleX(-1);

  &:hover {
    color: var(--grid-icon-hover-color-color);
  }
}

/********** Layout ***********/
.text-nowrap,
.nowrap {
  white-space: nowrap;
}

.text-right {
  text-align: right !important;
}

.pt-tiny {
  padding-top: 0.1rem;
}

.pr-tiny {
  padding-right: 0.1rem;
}

.px-tiny {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

// Prevent long string from breaking out of div boundary
.min-width-0 {
  min-width: 0;
}

.right-pad {
  padding-right: 0.5rem !important;
}

.nopad {
  padding: 0 !important;
}

.nomargin {
  margin: 0 !important;
}

.nowrap-flex {
  flex-wrap: nowrap !important;
}

.nopad-bottom {
  padding-bottom: 0 !important;
}

.mt-tiny {
  margin-top: 0.125rem !important;
}

.position-sticky {
  @include sticky();
}

.nopad + .nopad {
  padding-left: 10px;
}

.custom-scroll,
.custom-scroll .p-tabs-panels,
.custom-scroll .p-tabs-nav,
.custom-scroll .p-tabpanels,
.custom-scroll .p-tablist,
.custom-scroll .p-tabview-panels,
.custom-scroll .p-tabview-nav,
.p-datatable-scrollable .p-datatable-scrollable-body,
.p-select-overlay .p-select-list-container,
.p-dropdown-overlay .p-dropdown-list-container,
.p-multiselect-overlay .p-multiselect-list-container,
.p-autocomplete-overlay .p-autocomplete-list-container {
  @include custom-scrollbar();
}

::-webkit-scrollbar-thumb {
  background-color: $scrollbar-color !important;
  border-radius: 8px !important;

  // Simulates a margin around scrollbar thumb
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0) !important;
}

// Using !important to make sure we overwrite primeng styling
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent !important;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}

// Hide arrow buttons and spacing
::-webkit-scrollbar-button {
  display: none;
}

// Hide weird white square in corner
::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* PrimeNG 20 Overlay Scrollbars */
.p-overlay,
.p-component-overlay,
.p-select-overlay,
.p-dropdown-overlay,
.p-multiselect-overlay,
.p-autocomplete-overlay {
  @include custom-scrollbar();

  .p-select-list-container,
  .p-dropdown-list-container,
  .p-multiselect-list-container,
  .p-autocomplete-list-container {
    @include custom-scrollbar();
  }
}

body.login-mobile-device {
  overflow: auto;
  min-height: 740px;

  &.emergency-kit {
    min-height: 950px;
  }

  .mobile {
    height: 100%;

    .login-container {
      height: 100% !important;
    }
  }
}

.admin-page-content {
  overflow: auto;
  padding: 0 35px 10px 35px;

  small {
    margin-left: 10px;
    max-width: 610px;
    color: $hint-text-color;
  }

  .section {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;

    &.column {
      flex-direction: column;
      align-items: flex-start;

      & > .admin-section-title {
        margin: 0 0 15px 0;
      }

      &.disabled {
        pointer-events: none;
      }
    }

    & > .admin-section-text {
      margin-left: 0;
    }
  }

  .section-separator {
    border-top: 1px solid var(--overlay-panel-border-color);
    margin: 15px 10px;
    max-width: 1000px;
  }

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

  .more-info {
    margin-left: 5px;
  }

  @include custom-scrollbar()
}

.admin-section-title {
  color: $default-text-color;
  display: table-cell;
  min-width: 250px;
  margin: auto 15px;
  vertical-align: middle;
  line-height: 15px;

  small:not(.inline) {
    display: block;
    margin: 10px 0;
  }
}

.admin-section-control {
  display: flex;
  align-items: center;
  width: auto;
  word-wrap: break-word;

  hub-container-actions-loader {
    margin-left: auto;
  }
}

.section-tag {
  display: table-cell;
  line-height: 18px;
  margin-bottom: 0;
  margin-top: 9px;
  padding: 2px 0 2px 0;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

.section-tag ul {
  display: inline-flex;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 7px;
  flex-wrap: wrap;
  padding-left: 0;
}

.section-tag ul li {
  color: $secondary-text-color;
  background-color: $input-chips-bg-color;
  border-radius: 5px;
  margin-left: 0;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 2px 5px;
  white-space: nowrap;
}

.tag {
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px;
  margin-right: 5px;
  background-color: var(--tag-bg-color);
  color: var(--tag-txt-color);
  line-height: 1;
  font-weight: 600;
  border-radius: 2px;
  white-space: nowrap;
}

.connection-name-container {
  display: flex;
  align-items: center;

  span {
    margin-left: 5px;

    @include text-ellipsis();
  }
}

/********** Form **********/

.hub-form-header-row {
  padding-left: 12px;
  padding-right: 12px;
}

.hub-form-error-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;

  &.nopad .hub-form-error {
    right: 0;
    top: 0;
  }

  .hub-form-error {
    @extend .hub-form-error;
  }
}

.hub-form-error {
  color: $input-txt-error-color;
  font-size: 0.8em;
  text-align: right;
  line-height: 15px;
  position: initial;
  display: flex;
  padding: 2px 0 0 8px;

  span, p, sd-text {
    margin-top: 0;
    line-height: 1;
  }
}

/********** Loading **********/
#gateway-loading {
  position: fixed;
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;

  i.dvl-icon.dvl-icon-logo-gateway
  {
    animation: fa-beat 1s infinite linear;
    color: rgba(0, 104, 195, .3);
    font-size: 4em;
  }
}

router-outlet:not(:empty) + #gateway-loading {
  display: flex;
}

@keyframes fa-beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.loading {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 15%;
  z-index: 1;

  @media (max-width: 576px) {
    width: 35%;
  }
}

.isBlocked {
  position: relative;

  .block-overlay {
    border-radius: $borderRadius;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: $overlay-bg-color;
  }
}

.link--underline {
  text-decoration: underline;
}
