header {
    display: flex;
    height: 2.5rem;
    width: 100%;
}

header > p {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid var(--gray-color);
    font-weight: 400;
    color: var(--gray-color);
    cursor: pointer;
}

header > p.selected {
    border-color: var(--theme-color);
    color: var(--white-color);
    background-color: var(--theme-color);
}

header > p:not(.selected):hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
}