$panel-fill: var(--wds-color-fill-light-primary, var(--wsr-color-D80, #ffffff));
$panel-border: var(
  --wds-color-border-standard-tertiary,
  var(--wsr-color-D60, #dfe5eb)
);
$inset-shadow: var(
  --wds-color-black-100-transparent-30,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);
$scrollbar-track-width: 12px;

.mobile-preview-widget {
  & .preview-widget__content-area {
    border-radius: 36px;
    position: relative;
  }

  & .preview-widget__content-area::after {
    border-radius: inherit;
    content: '';
    position: absolute;
    display: block;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    box-shadow: inset 0 0 6px 0
      var(
        --wds-color-black-100-transparent-20,
        var(--wsr-color-D10-20, rgba(0, 6, 36, 0.2))
      );
    /* Added this to make the "content" div is scrollable */
    pointer-events: none;
  }

  & &__header {
    height: 60px;
    background-color: $panel-fill;
    border-bottom: 1px solid $panel-border;
    position: relative;
  }

  & &__camera {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    box-shadow: 1px 1px 4px 0 $inset-shadow inset;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: calc(50% - 36px);
  }

  & &__speaker {
    width: 48px;
    height: 6px;
    border-radius: 4px;
    box-shadow: 1px 1px 4px 0 $inset-shadow inset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  & &__content {
    height: 480px;
    width: 320px;
    overflow-y: auto;
    background-color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));

    &::-webkit-scrollbar {
      height: 0;
      width: $scrollbar-track-width;
    }

    &::-webkit-scrollbar-button {
      display: none;
      height: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(
        --wds-scrollbar-fill,
        var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff))
      );
      background-clip: content-box;
      border-radius: var(--wds-border-radius-full, calc(3px * 2));
      border: calc(
          (#{$scrollbar-track-width} - var(--wds-scrollbar-width, 6px)) / 2
        )
        solid transparent;
      height: 72px;
    }

    @media (hover: hover) {
      &::-webkit-scrollbar-thumb:hover {
        background-color: var(
          --wds-scrollbar-fill-hover,
          var(--wds-color-blue-200, var(--wsr-color-B20, #5999ff))
        );
      }
    }

    &::-webkit-scrollbar-thumb:active {
      background-color: var(
        --wds-scrollbar-fill-active,
        var(--wds-color-blue-100, var(--wsr-color-B10, #116dff))
      );
    }
  }

  & &__footer {
    height: 60px;
    background-color: $panel-fill;
    border-top: 1px solid $panel-border;
  }
}