/*
  ----------------------------------------------------------
        DOCUMENT LIBRARY
  ----------------------------------------------------------

  Map these fallback values to your existing design variables.
*/

.doc-library {
    --doc-library-color: var(--color-primary);
    --doc-library-hover-color: var(--color-secondary);
    --doc-library-border-color: color-mix(in srgb, white 80%, var(--color-primary));

    --doc-library-border-width: 2px;
    --doc-library-border-radius: 999px;
    --doc-library-background: transparent;

    --doc-library-item-gap: 16px;
    --doc-library-column-gap: 20px;

    --doc-library-padding-block: 20px;
    --doc-library-padding-inline: 30px;

    --doc-library-icon-size: 24px;
    --doc-library-font-size: 1.1rem;
    --doc-library-font-weight: 500;

    --doc-library-transition: 180ms ease;
}


/*
  DOCUMENT LIST
  ---------------------------------------------------------- */

.doc-library-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-library-list > li {
    margin: 0;
}

.doc-library-list > li:nth-child(n + 2) {
    margin-top: var(--doc-library-item-gap);
}

.doc-library-item {
    margin: 0;
}


/*
  DOCUMENT LINK
  ---------------------------------------------------------- */

.doc-library a.doc-library-item-link {
    display: block;
    width: 100%;

    padding:
        var(--doc-library-padding-block)
        var(--doc-library-padding-inline);

    box-sizing: border-box;

    color: var(--doc-library-color) !important;
    background: var(--doc-library-background);

    border-width: var(--doc-library-border-width);
    border-style: solid;
    border-color: var(--doc-library-border-color);
    border-radius: var(--doc-library-border-radius);

    text-decoration: none !important;

    transition:
        color var(--doc-library-transition),
        border-color var(--doc-library-transition),
        background-color var(--doc-library-transition);
}

.doc-library a.doc-library-item-link:hover,
.doc-library a.doc-library-item-link:focus,
.doc-library a.doc-library-item-link:focus-visible {
    color: var(--doc-library-hover-color) !important;
    border-color: var(--doc-library-hover-color);
    text-decoration: none !important;
    outline: none;
}

.doc-library a.doc-library-item-link:focus-visible {
    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--doc-library-hover-color) 22%,
            transparent
        );
}


/*
  UIKIT GRID
  ---------------------------------------------------------- */

.doc-library a.doc-library-item-link > .uk-grid {
    width: 100%;
    min-height: 100%;
    margin: 0;

    align-items: center;
}

.doc-library a.doc-library-item-link > .uk-grid > * {
    padding-left: 0;
}

.doc-library a.doc-library-item-link > .uk-grid > .uk-width-auto:first-child {
    margin-right: var(--doc-library-column-gap);
}

.doc-library a.doc-library-item-link > .uk-grid > .uk-width-auto:last-child {
    margin-left: var(--doc-library-column-gap);
}


/*
  FILE ICON
  ---------------------------------------------------------- */

.doc-library-item-file,
.doc-library-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: none;

    width: var(--doc-library-icon-size);
    height: var(--doc-library-icon-size);

    color: inherit;
    line-height: 1;
}

.doc-library-item-file svg,
.doc-library-file-icon svg {
    display: block;

    width: var(--doc-library-icon-size);
    height: var(--doc-library-icon-size);

    color: inherit;
}


/*
  FILE TITLE
  ---------------------------------------------------------- */

.doc-library a.doc-library-item-link .doc-library-item-title {
    display: flex;
    align-items: center;

    min-width: 0;
    min-height: var(--doc-library-icon-size);

    color: inherit;
    font-size: var(--doc-library-font-size);
    font-weight: var(--doc-library-font-weight);
    line-height: 1.35;

    text-decoration: none !important;
    overflow-wrap: anywhere;
}


/*
  DOWNLOAD ICON
  ---------------------------------------------------------- */

.doc-library-item-download {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: none;

    width: var(--doc-library-icon-size);
    height: var(--doc-library-icon-size);

    color: inherit;
    line-height: 1;

    transition: transform var(--doc-library-transition);
}

.doc-library-item-download svg {
    display: block;

    width: var(--doc-library-icon-size);
    height: var(--doc-library-icon-size);

    color: inherit;
}

.doc-library a.doc-library-item-link:hover .doc-library-item-download,
.doc-library a.doc-library-item-link:focus .doc-library-item-download,
.doc-library a.doc-library-item-link:focus-visible .doc-library-item-download {
    transform: translateY(2px);
}


/*
  ENSURE ALL CHILD ELEMENTS INHERIT LINK COLOUR
  ---------------------------------------------------------- */

.doc-library a.doc-library-item-link .doc-library-item-file,
.doc-library a.doc-library-item-link .doc-library-file-icon,
.doc-library a.doc-library-item-link .doc-library-item-title,
.doc-library a.doc-library-item-link .doc-library-item-download,
.doc-library a.doc-library-item-link svg {
    color: inherit;
    text-decoration: none !important;
}


/*
  EXPANDABLE DETAILS
  ---------------------------------------------------------- */

.doc-library-details {
    margin:
        10px
        var(--doc-library-padding-inline)
        0;

    padding: 16px 20px;

    border-radius: 12px;

    background:
        var(
            --surface-muted,
            rgba(0, 0, 0, 0.035)
        );
}


/*
  MOBILE
  ---------------------------------------------------------- */

@media (max-width: 639px) {

    .doc-library {
        --doc-library-column-gap: 14px;
        --doc-library-padding-block: 15px;
        --doc-library-padding-inline: 18px;
        --doc-library-icon-size: 22px;
        --doc-library-font-size: 1rem;
    }

    .doc-library-details {
        margin-right: 12px;
        margin-left: 12px;
    }

}