@use '~@/style/globals';
@use 'sass:color';

.MaterialViewDocumentsItem {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 0;
    border-radius: globals.$input-border-radius;
    background: globals.$bg-color-emphasis;
    color: globals.$text-base-color;
    list-style: none;

    &__link,
    &__no-link {
        display: block;
        padding: globals.$content-padding-small-vertical;
    }

    &__icon {
        flex: 0 0 auto;
        font-size: 1.8rem;

        .MaterialViewDocumentsItem__link,
        .MaterialViewDocumentsItem__no-link {
            margin-left: globals.$content-padding-small-vertical;
        }
    }

    &__name {
        flex: 1;
    }

    &__size {
        flex: 0 0 auto;
        margin-right: globals.$content-padding-small-vertical;
        color: globals.$text-light-color;
    }

    &__actions {
        flex: 0 0 auto;
        padding-right: globals.$content-padding-small-vertical;
    }

    &--with-link {
        .MaterialViewDocumentsItem {
            &__link,
            &__no-link {
                color: globals.$text-base-color;
            }
        }

        &:hover {
            background-color: color.adjust(globals.$bg-color-emphasis, $lightness: 5%);

            .MaterialViewDocumentsItem {
                &__link,
                &__no-link {
                    color: globals.$link-hover-color;
                }
            }
        }
    }
}
