@import "../variables";
@import "../mixins";

$period-nav-buttons-width: 200px;

.PeriodNav {
    @include base-container;

    margin-bottom: $offset-main;
    padding-bottom: $offset-main * 2;
    padding-top: $offset-main * 2;
}

.PeriodNav-wrapper {
    display: table;
    width: 100%;
}

.PeriodNav-container {
    display: table-cell;
    vertical-align: top;
}

.PeriodNav-container-title {
    text-align: center;
}

.PeriodNav-container-prev,
.PeriodNav-container-next {
    white-space: nowrap;
    width: $period-nav-buttons-width;
}

.PeriodNav-container-prev {
    text-align: left;
}

.PeriodNav-container-next {
    text-align: right;
}

.PeriodNav-title {
    @include inline-middle;

    display: block;
    margin: 0;
    position: relative;
}

.PeriodNav-edit-link {
    display: inline-block;
    line-height: 0;
}

.PeriodNav-note {
    vertical-align: baseline;
}