@import 'primevue/resources/themes/lara-dark-purple/theme.css';
@import 'primevue/resources/primevue.min.css';
@import 'primeicons/primeicons.css';
@import 'primeflex/primeflex.scss';

liquidswap-widget {
  font-size: 15px;
  min-height: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
  position: relative;
  font-family: var(--ls-font-family),
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol'
  ;
  background: linear-gradient(
    52.43deg,
    #14072e 22.22%,
    #0e0824 44.79%,
    #0a081e 59.58%
  );
  color: var(--ls-text-color);
  padding: 0;
  margin: 0 auto;
  -moz-osx-font-smoothing: grayscale;

  &.layout-scroll-block {
    overflow: hidden;
  }

  a {
    text-decoration: none;
  }

  p {
    color: var(--ls-text-color);
  }

  .onboarding-icon {
    display: inline-block;
    width: 1rem;
    background: url('../assets/union.svg') 0 0/contain no-repeat;
    &::before {
      content: "";
      display: block;
      padding-top: 100%;
    }
  }
}

.swap__container {
  margin: 0 auto;
  width: 100%;
}

:root {
  --ls-text-color: #e5e4fa;
  --ls-text-color-secondary: #6c757d; //9292A8
  --ls-primary-color: #6e42ca;
  --ls-primary-color-text: #ffffff;
  --ls-accent-success: #039581;
  --ls-accent-warning: #E67106;
  --ls-accent-error: #c62828;
  --ls-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --ls-surface-0: #ffffff;
  --ls-surface-50: #fafafa;
  --ls-surface-100: #f5f5f5;
  --ls-surface-200: #eeeeee;
  --ls-surface-300: #e0e0e0;
  --ls-surface-400: #bdbdbd;
  --ls-surface-500: #9e9e9e;
  --ls-surface-600: #757575;
  --ls-surface-700: #616161;
  --ls-surface-800: #424242;
  --ls-surface-900: #212121;
  --ls-surface-ground: #212429;
  --ls-surface-section: #ffffff;
  --ls-surface-card: #16162d;
  --ls-surface-overlay: #16162d;
  --ls-surface-border: #dee2e6;
  --ls-content-padding: 1rem;
  --ls-inline-spacing: 0.5rem;
  --ls-border-radius: 14px;
  --ls-border-color-invalid: #ca4242;
  --ls-blue-50: #f4fafe;
  --ls-blue-100: #cae6fc;
  --ls-blue-200: #a0d2fa;
  --ls-blue-300: #75bef8;
  --ls-blue-400: #4baaf5;
  --ls-blue-500: #2196f3;
  --ls-blue-600: #1c80cf;
  --ls-blue-700: #1769aa;
  --ls-blue-800: #125386;
  --ls-blue-900: #0d3c61;
  --ls-green-50: #f6fbf6;
  --ls-green-100: #d4ecd5;
  --ls-green-200: #b2ddb4;
  --ls-green-300: #90cd93;
  --ls-green-400: #6ebe71;
  --ls-green-500: #4caf50;
  --ls-green-600: #419544;
  --ls-green-700: #357b38;
  --ls-green-800: #2a602c;
  --ls-green-900: #1e4620;
  --ls-yellow-50: #fffcf5;
  --ls-yellow-100: #fef0cd;
  --ls-yellow-200: #fde4a5;
  --ls-yellow-300: #fdd87d;
  --ls-yellow-400: #fccc55;
  --ls-yellow-500: #fbc02d;
  --ls-yellow-600: #d5a326;
  --ls-yellow-700: #b08620;
  --ls-yellow-800: #8a6a19;
  --ls-yellow-900: #644d12;
  --ls-cyan-50: #f2fcfd;
  --ls-cyan-100: #c2eff5;
  --ls-cyan-200: #91e2ed;
  --ls-cyan-300: #61d5e4;
  --ls-cyan-400: #30c9dc;
  --ls-cyan-500: #00bcd4;
  --ls-cyan-600: #00a0b4;
  --ls-cyan-700: #008494;
  --ls-cyan-800: #006775;
  --ls-cyan-900: #004b55;
  --ls-pink-50: #fef4f7;
  --ls-pink-100: #fac9da;
  --ls-pink-200: #f69ebc;
  --ls-pink-300: #f1749e;
  --ls-pink-400: #ed4981;
  --ls-pink-500: #e91e63;
  --ls-pink-600: #c61a54;
  --ls-pink-700: #a31545;
  --ls-pink-800: #801136;
  --ls-pink-900: #5d0c28;
  --ls-indigo-50: #f5f6fb;
  --ls-indigo-100: #d1d5ed;
  --ls-indigo-200: #acb4df;
  --ls-indigo-300: #8893d1;
  --ls-indigo-400: #6372c3;
  --ls-indigo-500: #3f51b5;
  --ls-indigo-600: #36459a;
  --ls-indigo-700: #2c397f;
  --ls-indigo-800: #232d64;
  --ls-indigo-900: #192048;
  --ls-teal-50: #f2faf9;
  --ls-teal-100: #c2e6e2;
  --ls-teal-200: #91d2cc;
  --ls-teal-300: #61beb5;
  --ls-teal-400: #30aa9f;
  --ls-teal-500: #009688;
  --ls-teal-600: #008074;
  --ls-teal-700: #00695f;
  --ls-teal-800: #00534b;
  --ls-teal-900: #003c36;
  --ls-orange-50: #fff8f2;
  --ls-orange-100: #fde0c2;
  --ls-orange-200: #fbc791;
  --ls-orange-300: #f9ae61;
  --ls-orange-400: #f79530;
  --ls-orange-500: #f57c00;
  --ls-orange-600: #d06900;
  --ls-orange-700: #ac5700;
  --ls-orange-800: #874400;
  --ls-orange-900: #623200;
  --ls-bluegray-50: #f7f9f9;
  --ls-bluegray-100: #d9e0e3;
  --ls-bluegray-200: #bbc7cd;
  --ls-bluegray-300: #9caeb7;
  --ls-bluegray-400: #7e96a1;
  --ls-bluegray-500: #607d8b;
  --ls-bluegray-600: #526a76;
  --ls-bluegray-700: #435861;
  --ls-bluegray-800: #35454c;
  --ls-bluegray-900: #263238;
  --ls-purple-50: #faf4fb;
  --ls-purple-100: #e7cbec;
  --ls-purple-200: #d4a2dd;
  --ls-purple-300: #c279ce;
  --ls-purple-400: #af50bf;
  --ls-purple-500: #9c27b0;
  --ls-purple-600: #852196;
  --ls-purple-700: #6d1b7b;
  --ls-purple-800: #561561;
  --ls-purple-900: #3e1046;
  --ls-gray-50: #fafafa;
  --ls-gray-100: #f5f5f5;
  --ls-gray-200: #eeeeee;
  --ls-gray-300: #e0e0e0;
  --ls-gray-400: #bdbdbd;
  --ls-gray-500: #9e9e9e;
  --ls-gray-600: #757575;
  --ls-gray-700: #616161;
  --ls-gray-800: #424242;
  --ls-gray-900: #212121;
  --ls-red-50: #fff5f5;
  --ls-red-100: #ffd1ce;
  --ls-red-200: #ffada7;
  --ls-red-300: #ff8980;
  --ls-red-400: #ff6459;
  --ls-red-500: #ff4032;
  --ls-red-600: #d9362b;
  --ls-red-700: #b32d23;
  --ls-red-800: #8c231c;
  --ls-red-900: #661a14;
  --ls-primary-10: #24243a;
  --ls-primary-50: #f4fafe;
  --ls-primary-100: #cae6fc;
  --ls-primary-200: #a0d2fa;
  --ls-primary-300: #75bef8;
  --ls-primary-400: #4baaf5;
  --ls-primary-500: #2196f3;
  --ls-primary-600: #1c80cf;
  --ls-primary-700: #1769aa;
  --ls-primary-800: #125386;
  --ls-primary-900: #0d3c61;
}

#nprogress {
  .bar {
    background: var(--ls-primary-color);
  }

  .peg {
    box-shadow: 0 0 10px var(--ls-primary-color), 0 0 5px var(--ls-primary-color);
  }

}

.p-dialog-mask.p-component-overlay, .swap__container {
  .p-component {
    font-family: var(--ls-font-family);
  }

  .p-overlaypanel {
    background: rgb(25, 27, 31);
    border: 1px solid rgb(33, 36, 41);
    box-shadow: rgb(0 0 0 / 5%) 0px 4px 8px 0px;

    &::before,
    &::after {
      display: none;
    }
  }

  .p-dialog {
    border: none;
    box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
    rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;

    .p-dialog-header {
      background: var(--ls-surface-card);
      color: var(--ls-text-color);
      border: none;
      border-top-left-radius: 24px !important;
      border-top-right-radius: 24px !important;
    }

    .p-dialog-content {
      background: var(--ls-surface-card);
      border: none;
      border-bottom-left-radius: 24px !important;
      border-bottom-right-radius: 24px !important;
    }
  }

  .p-menu {
    margin-top: 10px;
    &.p-menu-overlay {
      overflow: hidden !important;
      border: 0;
      border-radius: 24px;
      min-width: 230px !important;
      background: var(--ls-surface-card);
      box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
      rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
    }
  }

  .p-inputtext {
    background: var(--ls-primary-10);
    padding: 0.75rem 0.75rem;
    border: 1px solid var(--ls-surface-card);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    box-shadow 0.2s;
    appearance: none;
    border-radius: 6px;

    &.p-invalid.p-component {
      border-color: var(--ls-border-color-invalid) !important;
    }
  }
  .p-inputtext:enabled:hover {
    border-color: #c4b5fd;
  }
  .p-inputtext:enabled:focus {
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
    border-color: #c4b5fd;
  }
  .p-inputtext.p-invalid.p-component {
    border-color: #fca5a5;
  }
  .p-inputtext.p-inputtext-sm {
    font-size: 0.875rem;
    padding: 0.65625rem 0.65625rem;
  }
  .p-inputtext.p-inputtext-lg {
    font-size: 1.25rem;
    padding: 0.9375rem 0.9375rem;
  }

  .p-toast-detail {
    white-space: break-spaces;
    word-break: break-word;
  }

  .p-inline-message {
    border-radius: 16px;
    font-weight: 400;
    &.p-inline-message-error {
      background: rgba(var(--ls-border-color-invalid), 0.2);
      border-color: var(--ls-border-color-invalid);
    }

    &.p-inline-message-warn {
      background: rgba(#F6851B, 0.2);
      border-color: #F6851B;
    }

    &.p-inline-message-info {
      background-color: rgba(110, 66, 202, 0.2);
      border-color: #6e42ca;

      .p-inline-message-icon {
        color: #8557e7;
      }
    }

    .p-inline-message-text {
      font-size: 0.9375rem;
      color: var(--ls-text-color);
    }
  }

  .p-message {
    &.p-message-warn {
      background: #2d2116;
      border: solid #cc8925;
      border-width: 0 0 0 6px;
      color: #cc8925;
    }

    &.p-message-info {
      background: #262647;
      border: solid var(--ls-primary-color);
      border-width: 0 0 0 6px;
      color: var(--ls-text-color);

      .p-message-icon {
        color: var(--ls-text-color);
      }
    }
  }

  .p-button {
    color: white;
    background: var(--ls-primary-color);
    border: 1px solid var(--ls-primary-color);
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    box-shadow 0.2s;
    border-radius: 16px;

    .p-button-label {
      font-weight: 500;
    }
    &.p-button-secondary {
      background: #1c1c33;
      border-color: #1c1c33;
      color: var(--ls-gray-300);
      &:enabled:hover {
        background: lighten(#1c1c33, 5%);
        border-color: #1c1c33;
        color: var(--ls-gray-50);
      }
      &:enabled:focus {
        box-shadow: none;
      }
    }
  }
  .p-button:enabled:hover {
    background: #b3a0fc;
    color: #1c2127;
    border-color: #b3a0fc;
  }
  .p-button:enabled:active {
    background: #a28bfc;
    color: #1c2127;
    border-color: #a28bfc;
  }

  .p-dialog-mask {
    z-index: 1000 !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
  }

  .p-overlaypanel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    z-index: 3;
    padding: 6px 16px;

    .p-overlaypanel-content {
      border-radius: 24px;
      background: #1e1e30;
      box-shadow: rgb(0 0 0 / 1%) 0px 0px 1px, rgb(0 0 0 / 4%) 0px 4px 8px,
      rgb(0 0 0 / 4%) 0px 16px 24px, rgb(0 0 0 / 1%) 0px 24px 32px;
    }
  }

  .p-button {
    color: white;
    background: var(--ls-primary-color);
    border: 1px solid var(--ls-primary-color);
    border-radius: 100px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;

    .p-button-label {
      font-weight: 500;
    }

    &:disabled {
      opacity: 0.5;
    }

    &.p-button-secondary {
      background: #43395b;
      color: white;
      border-width: 0px;
      border-radius: 100px;

      &:enabled:hover {
        background: #483a6b;
        color: white;
      }

      &:enabled:active {
        background: #3c3257;
        color: white;
      }

      &:enabled:focus {
        box-shadow: none;
      }

      &:disabled {
        opacity: 0.6;
      }
    }

    &:enabled:hover {
      color: white;
    }

    &:enabled:active {
      color: white;
    }

    &.p-button-primary {
      position: relative;
      border-width: 0px;
      border-radius: 100px;
      background-image: linear-gradient(90deg, #6e42ca 0%, #8d29c1 100%);
      z-index: 1;

      &::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(90deg, #6039b0 0%, #8d29c1 30.44%);
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(90deg, #8d6ad5 0%, #6f42ca 100%);
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &:active::after {
        opacity: 1;
      }

      &:hover::before {
        opacity: 1;
      }
    }

    &:enabled:hover {
      color: white;
      background-color: #8d6ad5;
    }

    &:enabled:active {
      color: white;
      background-color: #8d6ad5;
    }

    &.p-button-warning_custom {
      background-color: #ee5d0c;
      background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);

      &::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(89.82deg, #e57106 0.08%, #ee5d0c 99.85%);
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &:active::after {
        opacity: 1;
      }

      &:hover::before {
        opacity: 1;
      }

      &:enabled:hover {
        color: white;
        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
      }

      &:enabled:active {
        color: white;
        background-image: linear-gradient(89.82deg, #ee5d0c 99.85%, #e57106 0.08%);
      }
    }

    &.p-button-alert {
      background-color: #C62828;
      background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);

      &::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(89.82deg, #D75050 0.08%, #C62828 99.85%);
      ;
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
      ;
        z-index: -1;
        transition: all 0.25s ease-in-out;
        opacity: 0;
      }

      &:active::after {
        opacity: 1;
      }

      &:hover::before {
        opacity: 1;
      }

      &:enabled:hover {
        color: white;
        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
      }

      &:enabled:active {
        color: white;
        background-image: linear-gradient(89.82deg, #C62828 99.85%, #D75050 0.08%);
      }
    }
  }
}