<template>
  <div class="device">
    <div class="device__screen">
      <slot></slot>
    </div>
    <div class="device__bottom" />
  </div>
</template>

<style lang="scss">
.device {
  --screen-margin: 1.75em;
  --screen-radius: 0.75rem;
  --screen-padding: 0.75rem;

  &__screen {
    position: relative;
    background-color: var(--clr-page-black);

    margin: var(--screen-margin) var(--screen-margin) 0 var(--screen-margin);
    border: 0.0625rem solid var(--clr-page-black-light);
    border-bottom: none;
    border-radius: var(--screen-radius) var(--screen-radius) 0 0;
    padding: var(--screen-padding) var(--screen-padding) 1.375rem var(--screen-padding);

    &::before {
      position: absolute;
      content: 'ThinkDerg';
      inset: auto 0 0 0;
      font-family: var(--page-heading-font);
      font-size: 0.75rem;
      text-align: center;
      line-height: 1.75;
      background: linear-gradient(
        oklch(62.68% 0 0) 30%,
        oklch(94.91% 0 0) 40%,
        oklch(62.68% 0 0) 60%
      );
      background-clip: text;
      color: transparent;
    }

    > * {
      display: block;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
    }

    a {
      transition: all 0.3s linear;

      @media (hover: hover) {
        &:hover > * {
          filter: brightness(0.75);
        }
      }
    }
  }

  &__bottom {
    position: relative;
    background-color: var(--clr-page-black);
    width: 100%;
    height: 1.25rem;
    margin: 0 0 1.75rem 0;
    border-top: 0.0625rem solid var(--clr-page-black-light);
    border-radius: 0.125rem 0.125rem 1rem 1rem;
    overflow: hidden;

    &::before {
      position: absolute;
      content: '';
      inset: -0.75rem 38% 50%;
      box-shadow: inset 0 0 0.875rem var(--clr-page-black-light);
      border-radius: 0 0 0.25rem 0.25rem;
    }
  }
}
</style>
