@import '../../../styles/abstracts/variables';

#consumer-web {
  width: 100%;
  border-radius: 16px;
  height: calc(100vh - 48px) !important;
  max-height: 704px !important;

  &.consumer-web-full-width {
    @media (max-width: 768px) {
      height: 100% !important;
      max-height: 100vh !important;
    }
  }
}

#consumer-podcast-web {
  width: 100%;
  border-radius: 16px;
  background: white !important;
}

.profile-preview-wrapper {
  position: relative;

  @media (max-width: 768px) {
    background-color: black;
  }
}

.preview-loading {
  background: rgba($black, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
}
.preview-podcast-loading {
  background: rgba($black, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-message {
  background-color: $white;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  border-radius: 6.82614px;
  width: 186.01px;
  height: 34.13px;
  z-index: 2;

  svg,
  button {
    width: 20.48px !important;
    height: 20.48px !important;
  }

  .ant-typography {
    font-size: 12.799px;
    line-height: 17px;
    height: 17px;
    margin: 0 10.24px;
    letter-spacing: -0.204784px;
    text-align: center;
  }
}

.preview-device-type {
  background-color: $white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  border-radius: 16px;
  display: inline-block;

  &-wrapper {
    position: absolute;
    bottom: 16px;
    width: 100%;
    text-align: center;
  }

  .ant-btn,
  .ant-col {
    border-radius: 16px;
    height: 48px !important;
    .active {
      background-color: $grey2;

      &:hover,
      &:focus,
      &:active {
        background-color: $grey2 !important;
      }
    }
  }
}

.profile-preview-modal {
  width: 100% !important;
  height: 100%;
  max-height: calc(100vh - 80px);
  padding: 0;
  border-radius: 16px;
  overflow: hidden;

  &.desktop {
    max-width: 1200px !important;
  }

  &.tablet {
    max-width: 834px !important;
  }

  .ant-modal-content {
    height: 100%;
    overflow: hidden;

    .ant-modal-close {
      right: 8px;
      top: 4px;
    }
  }

  .ant-modal-body {
    height: 100%;
    padding: 32px 0 0 0;

    #consumer-web {
      border-radius: 0;
      height: 100% !important;
      max-height: unset !important;
    }
  }
}