// SPDX-License-Identifier: LGPL-2.1-or-later
@use "page.scss";
@use "ct-card.scss";
@use "@patternfly/patternfly/utilities/Text/text.css";

@import "@patternfly/patternfly/components/Button/button.css";

// Use the page as the toplevel container
.pf-v6-c-page {
    container-type: size;
}

// Passthrough for layout and styling purposes, to enable main page parts to participate in the grid
.pf-v6-c-page__main-section,
.files-view-stack,
.upload-drop-zone {
    display: contents;
}

.files-card {
    position: relative;
    // Links have underline by default, but within a tree structure or grid we don't want that as we want to
    // be more similar to how files actually are.
    // FIXME @Venefilyn: Maybe we can change from links as we don't use them as links. Possibly dirs are but not sure
    --pf-t--global--text-decoration--link--line--default: none;
}

.drag-drop-upload,
.drag-drop-upload-blocked {
    position: absolute;
    z-index: 100;
    border: 3px dashed var(--pf-t--global--text--color--link--default);
    border-radius: var(--pf-t--global--border--radius--medium);
    background: rgb(from var(--pf-t--global--background--color--primary--default) r g b / 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
}

.pf-v6-c-page__main {
    gap: var(--pf-t--global--spacer--md);
    display: grid;
    grid-template-rows: auto 1fr auto 0;
    grid-template-columns: [header-start] 0 [content-start] 1fr [content-end] 0 [header-end];
}

// Remove gaps on the left/right side of file view on small screens
@container (width < 768px) {
    .pf-v6-c-page__main {
        column-gap: 0;
    }
}

.files-empty-state,
.files-view-stack > .upload-drop-zone > .pf-v6-c-card,
.files-view-stack > .files-footer-info {
    grid-column: content;
}

.files-view-stack > .upload-drop-zone > .pf-v6-c-card {
    overflow: auto;
}

.files-view-stack > .files-footer-info {
    margin-block-start: 0;
}

/* Style the list cards as ct-cards */
.pf-c-page__main-section > .pf-c-card {
    @extend .ct-card;
}

.files-overview-header {
    grid-column: header;
    gap: var(--pf-t--global--spacer--sm);
    display: flex;
    // By default pf6 PageSections use column
    flex-direction: row;
    /* Align page breadcrumb centered */
    align-items: center;

    /* Override different background color from the <PageBreadCrumb> */
    .pf-v6-c-page__main-breadcrumb {
        background-color: unset
    }

  /* Drop PF padding */
    .pf-v6-c-page__main-breadcrumb {
        padding: 0;
        display: inline-block;
    }

    // Fix the double-spacing issue for other dropdowns
    // https://github.com/patternfly/patternfly/issues/6632
    .pf-v6-c-menu-toggle__controls:last-child > .pf-v6-c-menu-toggle__toggle-icon {
      margin-inline-end: 0;
    }

    .pf-v6-c-breadcrumb {
        margin-block: 0;
        margin-inline: var(--pf-t--global--spacer--sm);
    }
}

.pf-v6-c-breadcrumb {
    margin-block: 0;
    margin-inline: var(--pf-t--global--spacer--md);
}

.pf-v6-c-breadcrumb__list {
    // Make sure all breadcrumb text is aligned properly, even if different heights (including icon)
    align-items: baseline;

    // Style the breadcrumb component as a path
    .pf-v6-c-breadcrumb__item-divider {
        > svg {
            display: none;
        }

        &::after {
            content: "/";
        }
    }

    .pf-v6-c-breadcrumb__item {
        // Use the default font size, not the smaller size
        font-size: var(--pf-t--global--font--size--body--default);
    }

    // Size, align, and space icon correctly
    .breadcrumb-hdd-icon {
        // Set the size to a large icon
        block-size: var(--pf-t--global--font--size--lg);
        // Width should resolve itself based on height and aspect ratio
        inline-size: auto;
        // Align to the middle (as one would expect)
        vertical-align: middle;
    }
}

.breadcrumb {
    &-button {
        &-edit-apply,
        &-edit-cancel {
            padding-inline: var(--pf-t--global--spacer--sm);
        }

        &-edit-apply {
            svg {
                color: var(--pf-v6-c-button--m-link--Color);
            }

            &:focus svg {
                color: var(--pf-v6-c-button--m-link--focus--Color);
            }

            &:hover svg {
                color: var(--pf-v6-c-button--m-link--hover--Color);
            }

            &:active svg {
                color: var(--pf-v6-c-button--m-link--active--Color);
            }
        }
    }
}

.view-toggle-group {
    .pf-c-menu-toggle__button {
        display: flex;
        align-items: flex-start;
    }
}

.check-icon {
    color: var(--pf-global--primary-color--100);
}

// Wrap titles of modals (instead of truncating long filenames)
.pf-v6-c-modal-box__title, .pf-v6-c-modal-box__title-text {
    white-space: break-spaces;
}

.tooltip-hidden {
    visibility: hidden;
    pointer-events: none;
}

// First Menu SelectGroup item in the sort menu should have no top padding
.pf-v6-c-menu__list section:first-of-type {
    .pf-v6-c-menu__group-title {
        padding-block-start: 0;
    }
}

// // FIXME: Promote the CSS below to overrides, open PF issues // //

// PatternFly always adds a margin after images inside of widgets with pf-m-end, which is incorrect when it's the last element
.pf-v6-c-button__icon.pf-m-start:last-child {
    margin-inline-end: 0;
}

// PF menu toggles are no longer spaced consistently
.pf-v6-c-menu-toggle {
    padding-inline: var(--pf-t--global--spacer--md) calc(var(--pf-t--global--spacer--md) * 0.75);
}

// Toolbar actions styling
.header-toolbar {
    display: flex;
    flex-flow: row wrap;
    gap: var(--pf-t--global--spacer--md);
    justify-content: space-between;
    font-family: var(--pf-t--global--font--family--body);
    padding-inline: var(--pf-t--global--spacer--md);

    .files-search {
        flex: min-content;
    }

    .header-actions {
        display: flex;
        gap: var(--pf-t--global--spacer--md);
    }

    #dropdown-menu.pf-v6-c-menu-toggle {
        padding-inline-start: var(--pf-t--global--spacer--sm);
    }
}

.shortcuts-dialog {
    h2 + .pf-v6-c-description-list {
        margin-block-start: var(--pf-t--global--spacer--md);
    }

    .pf-v6-l-flex {
        // Add standard spacing between the description lists that are in a flex
        // (PF Flex does odd stuff by default)
        gap: var(--pf-t--global--spacer--lg) var(--pf-t--global--spacer--md);

        > .pf-v6-c-content {
            // Have the content prefer 20em and wrap if too narrow
            flex: 1 1 20em;
        }
    }

    .pf-v6-c-description-list {
        // We're setting this up as a table on the list, so they're consistent
        display: grid;
        // Fixing the width to the keyboard shortcuts
        grid-template-columns: auto 1fr;
        // Fix PF's negative margin at the end bug (as it's handled by grid layout anyway)
        margin-block-end: 0;

        .pf-v6-c-description-list__group {
            // Ignore the grid of the group and use the grid from the description list, so everything lines up properly
            display: contents;
        }
    }

    kbd {
        // Description lists bold the dt; we don't want the keys too look too bold
        font-weight: normal;
    }

    // Style key combos
    .keystroke {
        display: flex;
        align-items: center;
        color: var(--pf-t--global--text--color--regular);
        font-size: var(--pf-t--global--font--size--body--sm);
        gap: var(--pf-t--global--spacer--xs);
    }

    // Style individual keys
    .key {
        display: inline-block;
        background-color: var(--pf-t--global--background--color--primary--default);
        border-radius: var(--pf-t--global--border--radius--pill);
        border: 1px solid var(--pf-t--global--border--color--default);
        color: var(--pf-t--global--text--color--regular);
        padding-block: var(--pf-t--global--spacer--xs);
        padding-inline: var(--pf-t--global--spacer--sm);
        white-space: nowrap;
    }
}

// Files footer styling
.files-footer-info {
    display: flex;
    flex-flow: row wrap;
    column-gap: var(--pf-t--global--spacer--md);
    margin-block-start: var(--pf-t--global--spacer--sm);
    margin-inline-start: var(--pf-t--global--spacer--md);

    .files-footer-mtime {
        color: var(--pf-t--global--text--color--subtle);
    }
}
