.tb-layout-detail {
    display: flex;
    flex-direction: column;

    @include mappy-bp(md) {
        display: inline-block;
        width: 100%;
    }
}

.tb-layout-detail__main {
    display: block;
    font-size: config('textSizes.base');

    @include mappy-bp(md) {
        float: left;
        width: calc(66.66% - #{config('margin.10')});
        margin-right: config('margin.10');
        font-size: config('textSizes.lg');
    }

    p:not(:first-child) {
        margin-top: config('margin.4');
    }

    ul {
        padding-left: 1em;

        &:not(:first-child) {
            margin-top: config('margin.4');
        }
    }

    li:not(:first-child) {
        margin-top: .5em;
    }
}

.tb-layout-detail__sidebar-first,
.tb-layout-detail__sidebar-last {
    display: block;
    padding-left: config('padding.1');

    @include mappy-bp(md) {
        width: 33.33%;
        float: left;
    }
}

.tb-layout-detail__sidebar-first {
    order: -1;
}


/*
 * Temporary dirty fix for weather widget within tb-layout-detail__main
 * of City detail views.
 */
.tb-layout-detail__main {
    .tb-weather-list--horizontal .tb-weather-list__item {
        display: block;
        padding: config('padding.4') config('padding.8');
    }

    .tb-weather-list--horizontal,
    .tb-weather-copyright {
        text-align: left;
    }

    .tb-weather-list--horizontal .tb-weather-list__item {
        margin-top: 0;
        margin-right: 0;
    }

    .tb-weather-date {
        font-size: .875rem;
    }

    .tb-weather--lg {
        font-size: 1.5rem;
    }

    .tb-weather-copyright {
        padding-left: config('padding.8');
    }

    // stylelint-disable-next-line selector-max-class,selector-max-compound-selectors
    .tb-weather-list--horizontal .tb-weather-list__item + .tb-weather-list__item {
        padding-top: config('padding.4');
        margin-top: 0;
    }

    @media screen and (min-width: 540px) {
        .tb-weather-list--horizontal {
            display: flex;
            flex-wrap: wrap;
        }

        .tb-weather-list--horizontal .tb-weather-list__item {
            width: 33%;
            display: inline-block;
        }

        .tb-weather-list--horizontal .tb-weather-list__item:not(:last-of-type) {
            border-right: 1px solid config('colors.grey-lighter');
        }
    }

    @media screen and (min-width: 768px) {
        .tb-weather-list--horizontal {
            padding-top: config('padding.6');
        }
    }

    @media screen and (min-width: 1180px) {
        .tb-weather__temperature {
            margin-left: config('margin.6');
        }

        .tb-weather-date {
            margin-bottom: config('margin.2');
        }

        .tb-weather-icon {
            height: 3em;
            width: 3em;
        }
    }

    @media screen and (max-width: 800px) {
        .tb-weather-copyright {
            padding-left: config('padding.4');
        }

        .tb-weather-list__item {
            padding: config('padding.4');
        }
    }
}
