/* =========================================================
   BRIEFCASE CONTENTS CAPABILITIES
   ========================================================= */

.briefcase-pack-capability,
.briefcase-unpack-capability {
    position: relative;

    width: 110px;
    min-height: 92px;

    cursor: pointer;
}

/* =========================================================
   SHARED BRIEFCASE GRAPHIC
   ========================================================= */

.briefcase-pack-graphic,
.briefcase-unpack-graphic {
    position: relative;

    width: 72px;
    height: 62px;

    margin: 0 auto;
}

/* =========================================================
   CASE BODY
   ========================================================= */

.briefcase-pack-graphic::after,
.briefcase-unpack-graphic::after {
    content: "";

    position: absolute;

    left: 9px;
    bottom: 5px;

    width: 54px;
    height: 30px;

    box-sizing: border-box;

    border: 2px solid #fff;
    background: #111;

    z-index: 2;
}

/* =========================================================
   HANDLE
   ========================================================= */

.briefcase-pack-graphic::before,
.briefcase-unpack-graphic::before {
    content: "";

    position: absolute;

    left: 25px;
    top: 8px;

    width: 20px;
    height: 10px;

    box-sizing: border-box;

    border: 2px solid #fff;
    border-bottom: 0;

    z-index: 3;
}

/* =========================================================
   PAPERS
   ========================================================= */

.briefcase-pack-graphic .paper,
.briefcase-unpack-graphic .paper {
    position: absolute;

    width: 16px;
    height: 20px;

    box-sizing: border-box;

    border: 1px solid #fff;
    background: #111;

    z-index: 4;
}

/* =========================================================
   PACK — PAPERS ENTERING THE BRIEFCASE
   ========================================================= */

.briefcase-pack-graphic .paper:nth-child(1) {
    left: 19px;
    top: 18px;

    transform: rotate(-12deg);
}

.briefcase-pack-graphic .paper:nth-child(2) {
    left: 28px;
    top: 14px;

    transform: rotate(5deg);
}

.briefcase-pack-graphic .paper:nth-child(3) {
    left: 37px;
    top: 17px;

    transform: rotate(16deg);
}

/* =========================================================
   UNPACK — PAPERS ESCAPING THE BRIEFCASE
   ========================================================= */

.briefcase-unpack-graphic .paper:nth-child(1) {
    left: 17px;
    top: 2px;

    transform: rotate(-24deg);
}

.briefcase-unpack-graphic .paper:nth-child(2) {
    left: 29px;
    top: -1px;

    transform: rotate(7deg);
}

.briefcase-unpack-graphic .paper:nth-child(3) {
    left: 41px;
    top: 3px;

    transform: rotate(25deg);
}

/* =========================================================
   LABEL
   ========================================================= */

.briefcase-pack-capability .world-object-label,
.briefcase-unpack-capability .world-object-label {
    margin-top: 5px;
}