@import './custom-variables';

.sovryn-border {
  @apply tw-border tw-border-sov-white tw-rounded-lg;
}

@mixin table-header {
  @apply tw-text-base tw-text-sov-white;
  font-family: inherit;
  font-weight: inherit;
  padding: 0 22px;
  height: 45px;
  @media (max-width: 441px) {
    padding: 0 15px;
  }
}

.sovryn-table {
  @apply tw-w-full
    tw-text-sm tw-font-normal tw-font-body tw-tracking-normal;

  &.sovryn-table-mobile {
    @apply tw-text-xs;
  }

  .table-header div {
    @include table-header;
  }
  thead tr,
  .table-header:not(.sub-header) {
   @apply tw-h-10;
    th {
      @include table-header;
    }
  }
  tbody {
    tr {
      @apply tw-h-20;

      &:nth-child(odd) {
        td {
          @apply tw-bg-gray-3;

          &:first-child {
            @apply tw-rounded-l-md;
          }

          &:last-child {
            @apply tw-rounded-r-md;
          }

          &:only-child {
            @apply tw-rounded-md;
          }
        }
      }
    }
  }

  tbody tr,
  div.mobile-row {
    td {
      @apply tw-px-5 tw-py-3
        tw-text-sov-white;
      @media (max-width: 441px) {
        @apply tw-px-4;
      }
    }

    &:first-of-type {
      @apply tw-border-t-0;
    }

    &.table-header {
      height: 60%;

      > td {
        @include table-header;
        @apply tw-pt-5;
      }
    }
  }

  .mobile-row {
    @apply tw-content-center;
  }

  .sub-header div {
    @apply tw-text-tiny;
  }

  &.sovryn-table-mobile {
    [class^='col'] {
      @apply tw-px-1.5;
    }
  }
}

//new styles for Sovryn
button.button-round {
  @apply tw-px-5 tw-py-2 tw-ml-4
    tw-border tw-rounded-3xl
    tw-text-sm tw-font-extralight tw-font-body tw-normal-case;

  transition: background 0.3s;

  &:hover {
    background: rgba(254, 192, 4, 0.25) !important;
  }

  &:active,
  &:focus {
    background: rgba(254, 192, 4, 0.5) !important;
  }

  &:disabled {
    opacity: 0.5;
  }
}
button.button-width {
  min-width: 170px;
  max-width: 200px;
}

.image-bordered:before {
  @apply tw-absolute tw--inset-2.5
    tw-bg-white tw-rounded-2xl
    tw-overflow-hidden;
  z-index: 1;
  content: '';
}

.image-bordered img {
  z-index: 2;
  max-width: 320px;
  max-height: 460px;
  @apply tw-relative tw-rounded-md;
}

.sov-title {
  @apply tw-text-3xl tw-font-body tw-font-normal;
}

.sov-table {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 30px;
  z-index: 3;

  .table {
    @apply tw-m-0
      tw-text-left
      tw-bg-white;

    tr {
      height: auto;

      &:last-child {
        td {
          div {
            @apply tw-text-tiny tw-text-center;
          }
        }
      }
    }

    td[rowspan='2'] {
      text-align: center;
      width: 60px;
    }

    th,
    td {
      @apply tw-font-body tw-text-sm tw-tracking-normal tw-align-middle tw-text-gray-6
        tw-border tw-border-black;
      padding: 5px;
    }
  }
}

.custom-dialog-container {
  opacity: 1;
  transform: scale(1);
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100%;
  pointer-events: none;
  user-select: none;
  width: 100%;
  position: fixed;
  z-index: 20;
}
.bp3-overlay-inline .bp3-overlay-content,
.bp3-overlay-scroll-container .custom-dialog-container {
  position: absolute;
}
.custom-dialog-container > .custom-dialog {
  pointer-events: all;
  user-select: text;
}
.custom-dialog-container.bp3-overlay-appear > .custom-dialog,
.custom-dialog-container.bp3-overlay-enter > .custom-dialog {
  opacity: 0;
  transform: scale(0.5);
}
.custom-dialog-container.bp3-overlay-appear-active > .custom-dialog,
.custom-dialog-container.bp3-overlay-enter-active > .custom-dialog {
  opacity: 1;
  transform: scale(1);
  transition-duration: 0.3s;
  transition-property: opacity, transform, -webkit-transform;
  transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);
}
.custom-dialog-container.bp3-overlay-exit > .custom-dialog {
  opacity: 1;
  transform: scale(1);
}
.custom-dialog-container.bp3-overlay-exit-active > .custom-dialog {
  opacity: 0;
  transform: scale(0.5);
  transition-duration: 0.3s;
  transition-property: opacity, transform, -webkit-transform;
  transition-timing-function: cubic-bezier(0.54, 1.12, 0.38, 1.11);
}

.btn-trading[disabled] {
  @apply tw-bg-gray-6;
  opacity: 0.5;
  cursor: not-allowed;
  &:hover {
    @apply tw-bg-gray-6;
  }
}

/* history page */
.history-table {
  max-width: 1544px;
  margin: auto;
}

.search {
  min-width: 31.3rem;
}
