/**
 *
 *
 *
 */

$file__color-hover: #e3e3e3;

.file {

    // table to show files
    &__table {
        display: block;
        width: 100%;

        &-row {
            display: flex;
            flex-wrap: wrap;

            padding: 0.25em;
            border-bottom: $border;

            &:hover {
                background-color: $file__color-hover;
            }

            &--selected {
                background-color: $color__info;

                &:hover {
                    background-color: darken($color__info, 10%);
                }
            }
        }

        &-column {
            display: flex;
            flex: 2;
            align-items: center;

            padding: 5px;

            &--select {
                max-width: 30px;

                input[type=checkbox] {
                    position: relative;
                    display: none;

                    + label {
                        margin: -4px 0 0 0;

                        .checked {
                            display: none;
                        }

                        &:hover {
                            cursor: pointer;
                        }
                    }

                    &:checked + label .checked {
                        display: inline-block;
                    }

                    &:checked + label .unchecked {
                        display: none;
                    }
                }

                .checked, .unchecked {
                    vertical-align: bottom;
                }
            }

            &--back {
                padding: 8px 2px;
            }

            &--actions {
                line-height: 0;

                button {
                    &:disabled {
                        .icon {
                            opacity: 0.3;

                            &:hover {
                                cursor: not-allowed;
                            }
                        }
                    }
                }
            }
        }
    }

}