/* It is recommended to use grid if you want to change the layout of this item */
.pad-course-list-item.pad-block-with-styling{
    --pad-header-color: var(--pad-primary-color);
    --pad-header-text-color: var(--pad-primary-text-color);

    --pad-header-padding: 1rem;
    --pad-padding: 1rem;

    --pad-title-text-size: 1.5rem;
    --pad-title-font-weight: bold;

    --pad-tag-color-default: #ffcc80;
    --pad-tag-text-color-default: #000000;

    --pad-label-border-width-default: 2px;
    --pad-label-border-color-default: var(--pad-secondary-color);
    --pad-label-color-default: var(--pad-background-color);
    --pad-label-text-color-default: #000000;

    --pad-detail-button-alignment: end;

    --pad-price-text-align: right;

    --pad-border-color-default: black;
    --pad-border-thickness-default: 1px;
    --pad-border-radius-default: 10px;
    --pad-border-style-default: solid;

    --pad-course-list-item-header-columns: 3fr 2fr;
    --pad-course-list-item-header-grid-areas:
            "title price"
            "date date"
            "location location";

    --pad-course-list-item-columns: 1fr;
    --pad-course-list-item-grid-areas:
        "dayparts"
        "description"
        "tags"
        "button";


    background-color: var(--pad-background-color);
    padding: 0;
    border-width: var(--pad-border-thickness, var(--pad-border-thickness-default));
    border-style: var(--pad-border-style, var(--pad-border-style-default));
    border-color: var(--pad-border-color, var(--pad-border-color-default));
    border-radius: var(--pad-border-radius, var(--pad-border-radius-default));
    box-shadow: 0 2px 4px var(--pad-shadow-color);

    font-family: var(--pad-font-family);
    font-size: var(--pad-text-size);
    color: var(--pad-text-color);

    width: var(--pad-course-list-item-width, 100%);
}

.pad-course-list-item.pad-block-with-styling h5{
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.pad-course-list-item.pad-block-with-styling .pad-course-header{
    display: grid;
    grid-template-columns: var(--pad-course-list-item-header-columns);
    grid-template-areas: var(--pad-course-list-item-header-grid-areas);
    padding: var(--pad-header-padding);
    background-color: var(--pad-header-color);
    color: var(--pad-header-text-color);
}

.pad-course-list-item.pad-block-with-styling .pad-course-body{
    display: grid;
    grid-template-columns: var(--pad-course-list-item-columns);
    grid-template-areas: var(--pad-course-list-item-grid-areas);
    padding: var(--pad-padding);
}

.pad-course-list-item.pad-block-with-styling a{
    color: var(--pad-link-color);
}

.pad-course-list-item.pad-block-with-styling .pad-title{
    grid-area: title;
    color: var(--pad-header-text-color);
}

.pad-course-list-item.pad-block-with-styling .pad-title a{
    color: inherit;
    line-height: inherit;
    font-weight: var(--pad-title-font-weight);
    font-size: var(--pad-title-text-size);
}

.pad-course-list-item.pad-block-with-styling .pad-start-date{
    grid-area: date;
}

.pad-course-list-item.pad-block-with-styling .pad-location{
    grid-area: location;
}

.pad-course-list-item.pad-block-with-styling .pad-price{
    grid-area: price;
    text-align: var(--pad-price-text-align);
}

.pad-course-list-item.pad-block-with-styling .pad-daypart-list{
    grid-area: dayparts;
}

.pad-course-list-item.pad-block-with-styling .pad-description{
    grid-area: description;
    margin: 0;
}

.pad-course-list-item.pad-block-with-styling .pad-labels{
    grid-area: labels;
    padding: 0;
}

.pad-course-list-item.pad-block-with-styling .pad-tags{
    grid-area: tags;
}

.pad-course-list-item.pad-block-with-styling .pad-detail-button{
    grid-area: button;
    padding: 1rem;
    display: flex;
    justify-content: var(--pad-detail-button-alignment);
}