@import '~assets/styles/custom-button-styles.scss';

.grid-wrapper {
    display: grid;
    width: 100%;
    grid-template-areas:
        'project title buttons'
        'project controls controls';
    grid-gap: 10px;
    grid-template-columns: min-content auto min-content;
}

// could be in a shared scss
.projector-button {
    grid-area: project;
    margin: auto 10px auto 0;
}

.title {
    grid-area: title;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// could be in a shared scss
.action-buttons {
    grid-area: buttons;
    text-align: right;
    display: flex;
}

.timer {
    grid-area: controls;
    display: flex;
}

.larger-countdown {
    font-size: 150%;
    min-width: 60px;
}
