.PartyDetails {
    display: none; // This breaks transition, find a workaround
    opacity: 0;
    margin: 0 auto;
    max-width: $unit * 95;
    position: relative;

    &.Editable {
        top: $unit;
        height: 0;
        z-index: 2;
        transition: opacity 0.2s ease-in-out, 
                    top 0.2s ease-in-out;


        &.Visible {
            display: block;
            height: auto;
            margin-bottom: 40vh;
            opacity: 1;
            top: 0;
        }
    
        fieldset {
            display: block;
            width: 100%;
    
            textarea {
                min-height: $unit * 20;
                width: 100%;
            }
        }
    }

    &.ReadOnly {
        top: $unit * -1;
        transition: opacity 0.2s ease-in-out, 
                    top 0.2s ease-in-out;

        &.Visible {
            display: block;
            height: auto;
            opacity: 1;
            top: 0;
        }

        h1 {
            font-size: $font-xlarge;
            font-weight: $normal;
            text-align: left;
            margin-bottom: $unit;
        }

        .Raid {
            color: $grey-50;
            font-size: $font-regular;
            font-weight: $medium;
            margin-bottom: $unit * 2;
        }

        p {
            font-size: $font-regular;
            line-height: $font-regular * 1.2;
        }
    }
}