.nitro-camera-capture {
  position: relative;

  .header-close {
    top: 8px;
    right: 8px;
    border-radius: $border-radius;
    box-shadow: 0 0 0 1.5px $white;
    border: 2px solid #921911;
    background: repeating-linear-gradient(rgba(245, 80, 65, 1), rgba(245, 80, 65, 1) 50%, rgba(194, 48, 39, 1) 50%, rgba(194, 48, 39, 1) 100%);
    cursor: pointer;
    line-height: 1;
    padding: 1px 3px;

    &:hover {
      filter: brightness(1.2);
    }

    &:active {
      filter: brightness(0.8);
    }
  }

  .camera-area {
    position: absolute;
    top: 37px;
    left: 10px;
    width: 320px;
    height: 320px;
  }

  .camera-canvas {
    position: relative;
    width: 340px;
    height: 462px;
    background-image: url("@/assets/images/room-widgets/camera-widget/camera-spritesheet.png");
    background-position: -1px -1px;
    z-index: 2;

    .camera-button {
      width: 94px;
      height: 94px;
      cursor: pointer;
      margin-top: 362px;

      background-image: url("@/assets/images/room-widgets/camera-widget/camera-spritesheet.png");
      background-position: -343px -321px;

      &:hover {
        background-position: -535px -321px;
      }

      &:active {
        background-position: -439px -321px;
      }
    }

    .camera-view-finder {
      background-image: url("@/assets/images/room-widgets/camera-widget/camera-spritesheet.png");
      background-position: -343px -1px;
    }

    .camera-frame {
      .camera-frame-preview-actions {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }

  .camera-roll {
    width: 330px;
    background: #bab8b4;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 1px solid black;
    box-shadow: inset 1px 0px white, inset -1px -1px white;

    img {
      width: 56px;
      height: 56px;
      border: 1px solid black;
      object-fit: contain;
      image-rendering: initial;
    }
  }
}

.nitro-camera-editor {
  width: $camera-editor-width;
  height: $camera-editor-height;

  .picture-preview {
    width: 320px;
    height: 320px;
  }

  .layout-grid-item {
    height: 60px !important;
    max-height: 60px !important;
  }

  .effect-thumbnail-image {
    img {
      width: 50px;
      height: 50px;
      image-rendering: auto;
      object-fit: contain;
    }
  }

  .remove-effect {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 2px;
    font-size: 10px;
    min-height: unset;
  }
}

.nitro-camera-checkout {
  width: $camera-checkout-width;

  .picture-preview {
    width: 320px;
    height: 320px;
  }
}
