/* Variabili CSS per il componente sort-elearning */
:root {
  --sort-elearning-text-color: var(--color-f0, #333);
  --sort-elearning-bg-color: var(--color-p4, #f5f5f5);
  --sort-elearning-font-size-small: 0.8rem;
  --sort-elearning-font-size-base: 1rem;
  --sort-elearning-font-weight-normal: 400;
  --sort-elearning-font-weight-bold: 700;
  --sort-elearning-opacity-muted: 0.6;
  --sort-elearning-spacing-xs: 4px;
  --sort-elearning-spacing-sm: 8px;
  --sort-elearning-spacing-md: 1rem;
  --sort-elearning-border-radius: 0;
  --sort-elearning-z-index: 9;
  --sort-elearning-chevron-size: 0.8em;
  --sort-elearning-icon-down: "\f078";
  --sort-elearning-icon-up: "\f077";
  --sort-elearning-font-family-icons: FontAwesome;
}

#block-sortbyviewelearningdisplaypage {
    text-align: right;
    position: relative;
    
    h2 {
        font-size: var(--sort-elearning-font-size-small);
        font-weight: var(--sort-elearning-font-weight-normal);
    }
    
    .search-api-sorts {
        padding: 0;
        list-style: none;
        
        .sort-item {
            font-weight: var(--sort-elearning-font-weight-bold);
            color: var(--sort-elearning-text-color);
        }
    }
    
    .sort_list_widget {
        color: var(--sort-elearning-text-color);
        &:hover{
            text-decoration: none;
        }
        .sort_list_widget_text {
            opacity: var(--sort-elearning-opacity-muted);
            margin-left: var(--sort-elearning-spacing-xs);
            border: 1px solid #D5D5D5;
            padding: var(  --sort-elearning-spacing-sm);
            .tablesort {
                position: relative;
                top: 3px;
            }
        }
        
        &[aria-expanded="false"] {
            &:before {
                content: var(--sort-elearning-icon-down);
                font-family: var(--sort-elearning-font-family-icons);
                font-style: normal;
                font-weight: normal;
                text-decoration: inherit;
                color: var(--sort-elearning-text-color);
                font-size: var(--sort-elearning-chevron-size);
                margin-right: var(--sort-elearning-spacing-sm);
            }
        }
        
        &[aria-expanded="true"] {
            &:before {
                content: var(--sort-elearning-icon-up);
                font-family: var(--sort-elearning-font-family-icons);
                font-style: normal;
                font-weight: normal;
                text-decoration: inherit;
                color: #000;
                font-size: var(--sort-elearning-chevron-size);
                margin-right: var(--sort-elearning-spacing-sm);
            }
        }
    }
   
    #collapseExample {
        background: var(--sort-elearning-bg-color);
        padding: var(--sort-elearning-spacing-md);
        position: absolute;
        width: 100%;
        z-index: var(--sort-elearning-z-index);
        right: 0;
        border-radius: var(--sort-elearning-border-radius);
        
        span {
            display: block;
            font-size: var(--sort-elearning-font-size-small);
            color: var(--sort-elearning-text-color);
            cursor: pointer;
            padding: 0;
            line-height: 2rem;
        }
    }
}