@import "./ngbTargetsForm.variables";
@import "../../../../shared/components/ngbTags/ngbTags";

.add-target-form {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;

    .loading-indicator {
        padding: 0;
        height: 6px;
    }

    .md-button {
        margin: 0 5px;
    }

    .hidden {
        display: none;
    }

    ngb-panel-error-list {
        padding: 0;

        .layout-padding, .layout-padding > * {
            padding: 0;
        }

        .ngb-panel-error-list md-content.md-warn {
            border-top: 0;
        }

        md-list-item, md-list-item .md-list-item-inner {
            min-height: 18px;
            height: auto;
            overflow: hidden;
            font-size: $tag-font-size;
        }
    }

    .full-width {
        padding: $table-cell-full-width-padding;
        width: unset;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .no-genes-info {
        color: $form-warning-color;
    }

    .add-gene-link ,
    .upload-link,
    .import-link {
        margin: 5px 20px;
        cursor: not-allowed;
        font-style: normal;

        &:not(.disabled) {
            color: rgb(51, 103, 214);
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .cancel-link {
        margin: 20px;
        cursor: not-allowed;
        font-style: normal;
        color: rgb(183,28,28);

        &:hover {
            text-decoration: underline;
        }
    }

    .table-buttons {
        margin-top: 10px;
    }

    .file-name {
        font-size: 13px;
        margin-top: 10px;
    }

    .radio-title {
        font-weight: bold;
        color: #333333;
        min-width: 60px;
        margin-left: 5px;
    }

    .target-type {
        text-transform: capitalize;
        font-size: 13px;
        line-height: 31px;
        min-height: 31px;
        height: 31px;
        margin-top: 5px;
    }

    md-radio-button.radio-button {
        display: inline;
        font-size: 13px;

        .md-container {
            width: 16px;
            height: 16px;
            left: 10px;
        }

        .md-on {
            width: 16px;
            height: 16px;
        }

        .md-off {
            width: 16px;
            height: 16px;
        }
    }

    .ngb-targets-form-section {
        margin: 2px 2px 8px;

        .ngb-targets-form-section-header {
            padding: 7px $form-horizontal-offset;
            color: $section-header-color;
            background: $section-header-background;
            font-size: $section-header-font-size;
        }
    }
}

.form-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 5px;
    padding: 0 calc($form-horizontal-offset - 4px);
    box-sizing: border-box;
    width: 100%;
    line-height: 32px;

    .md-warn {
        color: rgba(0,0,0,0.87);
        background-color: rgb(251, 84, 84);
    }

    .md-warn:hover {
        background-color: rgb(251, 128, 128);
    }
}

.back-target-button {
    min-height: $main-action-button-height;
    height: $main-action-button-height;
    line-height: $main-action-button-height;
    min-width: 40px;
    width: 40px;
    margin: 5px;

    ng-md-icon {
        fill: rgba(255,255,255,0.87);
    }
}

.target-button {
    min-height: $main-action-button-height;
    height: $main-action-button-height;
    line-height: $main-action-button-height;
    min-width: 60px;
    margin: 5px;
}

input.ngb-targets-form-table-input {
    flex: 1;
    margin: 2px 0;
    border-radius: $table-control-border-radius;
    border: none;
    background: $table-control-background;
    height: $table-control-height;
    color: $table-control-font-color;
    padding: $table-control-padding;
    font-size: $table-control-font-size;
    box-sizing: border-box;
    border-bottom: 1px solid darken($table-control-background, 20%);

    &.error {
        border-color: red;
    }

    &:hover:not(:focus) {
        background: $table-control-hover-background;
    }
    &:hover,
    &:active,
    &:focus {
        outline: none;
    }
}

.delete-target-dialog {
    width: 400px;
    min-width: 400px;

    md-dialog-content {
        min-width: 400px;
        width: 400px;
    }

    h2 {
        margin: 15px;
    }
}

ngb-tags.ngb-target-diseases,
ngb-tags.ngb-target-products {
    margin-top: 5px;
    font-size: $tag-font-size;
    @include ngb-tags($tag-size, $tag-background, $tag-color, none, $tag-border-radius, $form-horizontal-offset);

    .ngb-tags-title {
        font-weight: $table-header-cell-font-weight;
        font-size: $table-header-cell-font-size;
        color: $table-header-cell-color;
        min-width: $main-section-title-width;
    }
}
