@import '../../../utils/colors.less';
@import '../../../utils/fonts.less';
@import '../../../utils/mixin.less';

.party-header-sheet {
    display: flex;
    flex-direction: column;
    justify-content: start;
    text-align: center;

    .profile {
        height: 235px;
        cursor: pointer;
        .smooth-gradient-ease-in-out(mask-image, to top, black, 3.5rem);
    }

    .item-container {
        margin-top: -2rem;
        z-index: 1;
        input.item-name[type='text'] {
            backdrop-filter: none;
            border: none;
            color: @color-text-emphatic;
            font-family: @font-title;
            font-size: var(--font-size-32);
            outline: 2px solid transparent;
            box-shadow: unset;
            text-shadow: 0 0 4px @color-text-shadow-contrast, 0 0 8px @color-text-shadow-contrast, 0 0 14px @color-text-shadow-contrast;

            text-align: center;
            transition: all 0.3s ease;
            width: calc(100% - 40px);
            height: 2.625rem;

            &:hover[type='text'],
            &:focus[type='text'] {
                outline: 2px solid @color-border;
            }
        }

        .label {
            font-style: normal;
            font-weight: 700;
            font-size: 16px;
            margin: 5px 0;
        }
    }
}