// Name:            Description list
// Description:     Defines styles for description lists
//
// Component:       `uk-description-list`
//
// Modifiers:       `uk-description-list-horizontal`
//                  `uk-description-list-line`
//
// ========================================================================


// Variables
// ========================================================================

@description-list-horizontal-width:             165px;
@description-list-horizontal-margin-left:       180px;

@description-list-line-margin-top:              @global-margin-small;
@description-list-line-padding-vertical:        @global-margin-small;
@description-list-line-border-width:            1px;
@description-list-line-border:                  @global-border;
@description-list-line-color:                   @global-border;

@description-list-line-font-weight:             normal;


/* ========================================================================
   Component: Description list
 ========================================================================== */


/* Modifier: `uk-description-list-horizontal`
 ========================================================================== */

/* Tablet and bigger */
.uk-description-list-horizontal { overflow: hidden; }

.uk-description-list-horizontal > dt {
    margin-top: 0;
    width: @description-list-horizontal-width;
    float: left;
    clear: both;
    padding: @description-list-line-padding-vertical 0;
}

.uk-description-list-horizontal > dd {
    margin-left: @description-list-horizontal-margin-left;
    padding: @description-list-line-padding-vertical 0;
}


/* Modifier: `uk-description-list-line`
 ========================================================================== */

.uk-description-list-line > dt {
    font-weight: @description-list-line-font-weight;
    padding: @description-list-line-padding-vertical 0;
}

.uk-description-list-line > dt:nth-child(n+2) {
    margin-top: @description-list-line-margin-top;
    padding-top: @description-list-line-margin-top;
    border-top: @description-list-line-border-width solid @description-list-line-border;
}

.uk-description-list-line > dd {
    color: @description-list-line-color;
    padding: @description-list-line-padding-vertical 0;
}


// Hooks
// ========================================================================