import styled from 'styled-components' ; export const TransactionCellPanel = styled . div `
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;

  background: ${ ( { highLight = false } ) => ( highLight ? '' : '#f5f5f5' ) };

  @media (min-width: 750px) {
    height: 20px;
  }

  @media (max-width: 750px) {
    justify-content: normal;
    align-items: flex-start;
    flex-direction: column;
  }

  .transaction__cell_address {
    color: ${ ( { highLight = false , theme } ) => highLight ? `${ theme . primary }` : '#000000' };

    font-weight: 500;
    height: 20px;
    display: flex;
    align-items: center;

    @media (max-width: 750px) {
      height: 16px;
      font-size: 14px;
    }

    a {
      color: ${ ( { theme } ) => `${ theme . primary }` };
    }

    a:hover {
      color: ${ ( { theme } ) => `${ theme . primary }` };
    }
  }
` ; export const TransactionCellCapacityPanel = styled . div `
  color: #000000;
  margin-left: 15px;
  display: flex;
  max-height: 40px;
  align-items: center;

  @media (max-width: 750px) {
    margin-left: 0px;
    margin-top: 5px;
    height: 16px;
    width: 100%;
    justify-content: flex-end;
  }

  > span {
    margin-left: 5px;
  }

  .transaction__cell__without__icon {
    margin-right: 21px;
  }
` ; export const TransactionCellWithdraw = styled . div `
  display: flex;
  align-items: center;
  margin-top: 2px;

  img {
    margin-left: 5px;
    width: 16px;
    height: auto;
    cursor: pointer;

    @media (max-width: 750px) {
      width: 12px;
      height: auto;
    }
  }
` ; export const TransactionCellUDTPanel = styled . div `
  .transaction__cell__udt__icon {
    margin-left: 5px;
    width: 16px;
    height: auto;
    cursor: pointer;

    @media (max-width: 750px) {
      width: 12px;
      height: auto;
      margin-bottom: 3px;
    }
  }
` ; export const WithdrawInfoPanel = styled . div `
  > p {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    margin-bottom: 16px;

    @media (max-width: 750px) {
      font-size: 11px;
      margin-bottom: 8px;
    }
  }
` ; export const WithdrawItemPanel = styled . div `
  margin: 10px;
  display: flex;

  @media (max-width: 750px) {
    margin: 5px;
  }

  .withdraw__info_title {
    font-size: 14px;
    font-weight: 450;
    width: ${ ( { width } ) => { switch ( width ) { case 'long' : return '180px' ; case 'medium' : return '150px' ; default : return '85px' ; } } };

    @media (max-width: 750px) {
      font-size: 10px;
      width: ${ ( { width } ) => { switch ( width ) { case 'long' : return '130px' ; case 'medium' : return '105px' ; default : return '60px' ; } } };
    }

    @media (max-width: 375px) {
      font-size: 9px;
      width: ${ ( { width } ) => { switch ( width ) { case 'long' : return '145px' ; case 'medium' : return '115px' ; default : return '65px' ; } } };
    }
  }

  .withdraw__info_content {
    font-size: 14px;

    @media (max-width: 750px) {
      font-size: 10px;
    }

    @media (max-width: 375px) {
      font-size: 9px;
    }
  }

  a {
    color: ${ ( { theme } ) => theme . primary };
  }

  a:hover {
    color: ${ ( { theme } ) => `${ theme . primary }` };
  }
` ;