import styled from "styled-components";
import { Wrapper as BackWrapper } from "./back";
import { Wrapper as WalletWrapper } from "./wallet/styled";
import { currentTheme } from "../../theme";
export const Wrapper = styled.aside `

  transition: all 0.5s ease-in-out 0s;
  position: sticky;
  top: ${currentTheme.sidebar?.top};
  right: 0;
  bottom: 8px;

  margin: ${currentTheme.sidebar?.margin};
  display: flex;
  flex-direction: column;
  align-items: stretch;

  flex: 0 0 288px;
  max-width: 288px;
  max-height: ${currentTheme.sidebar?.maxHeight}};
  min-height: 640px;

  background: #ffffff;
  box-shadow: ${currentTheme.card?.boxShadow};
  border-radius: ${currentTheme.card?.borderRadius};
  border: ${currentTheme.card?.border};
  overflow: hidden;
  box-sizing: border-box;

  .label {
    background: ${currentTheme.colors.pale};
    border: 1px solid ${currentTheme.colors.border};
    border-radius: 4px;
    padding: 12px 16px;
  }

  .transaction-hash {
    height: 40px;
    background: ${currentTheme.colors.pale};
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;
  }

  .transaction-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 3px 0;
    min-height: 26px;
  }

  .tabs .ui-tabs__item-wrapper {
    box-shadow: unset;
    min-width: 50%;
    border: 1px solid ${currentTheme.colors.border};
    border-radius: unset;

    &.active {
      border: 1px solid ${currentTheme.colors.primary};
    }
    :first-of-type {
      border-radius: 4px 0 0 4px;
    }
    :last-of-type {
      border-radius: 0 4px 4px 0;
    }
  }

  .center {
    padding: 0 24px;
    text-align: center;
    display: flex;
    flex-grow: 1;
    flex-flow: column nowrap;
    align-items: center;
  }

  .sidebar-install-wallet {
    font-size: 14px;
    font-family: "Medium";
  }

  .header {
    padding: 0px 16px;
    display: flex;
    align-items: center;

    border-bottom: 1px solid ${currentTheme.colors.border};

    min-height: 52px;
    width: 100%;

    box-sizing: border-box;
    cursor: pointer;
    transition: 0.2s;

    &__address {
      margin-right: 14px;
    }

    .settings {
      padding-left: 6px;
      cursor: pointer;
      path {
        transition: 0.2s;
      }
    }

    :hover {
      background: ${currentTheme.colors.pale};
      box-shadow: ${currentTheme.sidebar?.hoverBoxShadow};

      .settings path {
        stroke: ${currentTheme.colors.primary};
        :first-of-type {
          fill: ${currentTheme.colors.primary};
        }
        :last-of-type {
          fill: ${currentTheme.colors.pale};
        }
      }
    }
  }

  .token {
    flex-wrap: nowrap;

    height: 41px;
    width: 100%;

    padding: 0 16px;

    cursor: pointer;
    position: relative;
    transition: 0.2s;

    &.disabled {
      cursor: default;
    }

    svg {
      margin-right: 12px;
      min-width: 24px;
      width: 24px;
      height: 24px;
    }

    ::after,
    ::before {
      content: "";
      position: absolute;
      background: ${currentTheme.colors.border};
      left: 16px;
      right: 16px;
      width: calc(100% - 32px);
      height: 1px;
      transition: 0.2s;
    }

    ::after {
      bottom: 0;
    }

    ::before {
      top: -1px;
    }

    .name {
      margin-right: 12px;
      min-width: 35px;
      text-transform: uppercase;
    }

    .amount {
      margin-left: 16px;
      margin-right: 0;
    }

    .value {
      color: ${currentTheme.colors.gray};
      width: 80px;
      text-align: right;
    }

    :hover {
      background: ${currentTheme.colors.pale};
      box-shadow: ${currentTheme.sidebar?.hoverBoxShadow};

      ::after,
      ::before {
        left: 0;
        right: 0;
        width: 100%;
      }
    }
  }

  .token-icon {
    svg {
      height: 36px;
    }
    svg > circle,
    svg > path[fill="#CCDAE9"] {
      fill: ${currentTheme.colors.border};
    }

    svg path[fill="#002445"],
    svg path[fill="rgb(0, 36, 69)"] {
      fill: ${currentTheme.colors.dark};
    }

    svg > path[fill="#92A1AE"] {
      fill: ${currentTheme.colors.light};
    }

    &:first-child .ui-table__item p:not(.subscript) {
      color: ${currentTheme.colors.primary};
      font-family: Bold;
    }
  }

  .wallet {
    border-bottom: 1px ${currentTheme.colors.border} solid;
    height: 43px;
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 5px 0;

    flex-wrap: nowrap;
    align-items: center;

    &__balance {
      border: 1px solid ${currentTheme.colors.border};
      border-radius: 4px;

      min-height: 41px;

      padding: 0 16px;
      margin: 0 16px;

      display: flex;
      align-items: center;

      .name {
        margin-right: 12px;
        min-width: 35px;
        text-transform: uppercase;
      }

      .amount {
        margin-left: auto;
        margin-right: 8px;
      }

      .value {
        color: ${currentTheme.colors.gray};
        width: 80px;
        text-align: right;
      }
    }

    .ui-radio-button {
      width: 100%;
      justify-content: space-between;
      padding-left: 7px;
      flex-direction: row-reverse;

      .ui-radio-button__input {
        margin-right: 0;
        margin-left: 14px;
      }
    }
  }

  .transfers {
    overflow-y: scroll;
    &::-webkit-scrollbar-track {
      border-radius: 4px;
    }

    &::-webkit-scrollbar {
      width: 3px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: ${currentTheme.colors.primary};
    }
  }

  .input-token-row {
    position: relative;
    z-index: 66;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;

    .ui-input__wrapper {
      padding: 0;
    }

    .ui-select__wrapper {
      padding: 20px 0px 0 0;
    }

    .ui-input__content,
    .ui-select__content {
      height: 48px;
    }

    .ui-input__subscript {
      bottom: -12px;
    }

    .ui-input--disabled .ui-input__content,
    .ui-select--disabled .ui-select__content {
      background: ${currentTheme.colors.pale};
    }

    .ui-input--disabled .ui-input__input:disabled {
      color: ${currentTheme.colors?.text};
    }
  }

  .row {
    padding: 12px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;

    &.suggest {
      flex-flow: column nowrap;
      background: ${(props) => props.theme?.colors?.primary ?? ""};
      border-radius: 4px;
      margin: 16px 12px;
      width: calc(100% - 24px);

      &.arrow {
        position: relative;
        margin-top: 0;

        &.deposit {
          > p {
            color: white;
          }

          &:before {
            position: absolute;
            top: -5px;
            left: 36px;
            content: "";
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid ${(props) => props.theme?.colors?.primary ?? ""};
          }
        }
      }
    }

    .ui-input__wrapper,
    .ui-select__wrapper {
      padding: 0;
    }

    &.chart {
      padding: 0px 5px 0px 5px;
      width: 100%;
    }

    &.transfer {
      border-top: 1px ${currentTheme.colors.border} solid;
      height: 48px;
      width: calc(100% - 32px);
      padding: 12px 0;
      margin: 0 16px;
      cursor: pointer;
      justify-content: space-between;
    }

    .group {
      display: flex;
      flex-flow: column nowrap;
      margin-left: 12px;
    }
  }

  &.collapsed {
    width: 72px;
    padding: 0px 17px;
  }

  .ui--IdentityIcon {
    position: relative;
    width: 30px;
    min-width: 26px;
    height: 26px;

    > div {
      position: absolute;
      top: 0;
      left: 0;

      border: 1px solid ${currentTheme.colors.border};
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  @media (max-width: 1280px) {
  }

  @media (max-width: 1200px) {
    position: fixed;
    margin: 0;
    z-index: 200;
    transform: translateX(288px);
  }
`;
export const ActionWrapper = styled.div `
  padding: 0;
  overflow-y: scroll;
  min-height: 550px;

  &::-webkit-scrollbar-track {
    border-radius: 4px;
  }

  &::-webkit-scrollbar {
    width: 3px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: ${currentTheme.colors.primary};
  }

  div.address-row {
    position: relative;
    z-index: 1;

    :hover {
      z-index: 2;
    }
  }
`;
export const DexWrapper = styled(Wrapper) `
  flex: 0 0 366px;
  max-width: 366px;
  width: 100%;
  min-height: 614px;

  background: #ecf6ff;
  border: 1px solid #ecf6ff;
  box-shadow: 0px 4px 22px rgba(150, 177, 205, 0.3);

  margin: 0;
  padding: 16px 0;

  position: initial;

  .header,
  ${BackWrapper} {
    padding: 0px 54px;
  }

  .row {
    padding: 12px 54px;
  }

  ${WalletWrapper},
  ${ActionWrapper} {
    padding: 0px 38px;
  }

  ${ActionWrapper} {
    .row {
      padding: 12px 16px;
    }
  }

  .btns button {
    background: transparent;
    :hover {
      color: #0078e2;
    }
  }

  .label {
    background: #f9fcff;
  }

  @media (max-width: 1200px) {
    transform: unset;
  }
`;
export const WithdrawAddressWithTooltip = styled.div `
  display: flex;
  align-items: center;

  .ui-tooltip-base__container-marker {
    margin-left: 4px;
  }

  .ui-tooltip-base__container-content {
    min-width: 256px;
    min-height: 86px;
    right: unset;
    left: calc(50% - 58px);
    padding: 16px;

    ::before {
      right: unset;
      left: 48px;
    }
  }
`;
export const WithdrawEthBnbWarning = styled.div `
  background: ${(props) => props.theme?.colors?.pale ?? ""};

  border: 1px solid ${(props) => props.theme?.colors?.border ?? ""};
  box-sizing: border-box;
  width: calc(100% - 32px);
  border-radius: 2px;
  font-size: 12px;
  font-family: Medium;

  margin: 12px 16px;
  padding: 20px;

  div:first-of-type {
    font-family: Bold;
    margin-bottom: 4px;
  }
`;
//# sourceMappingURL=styled.js.map