@import "projects/esp-common-ui/src/app/theme";

.common-ui-component {
  .navigation {
    position: fixed;
    a {
      &:hover {
        text-decoration: none;
      }
    }
    .pointer {
      color: $aeap-color-primary;
      display: block;
    }
    &.pull-nav {
      top: 0;
    }
  }
  .nav-placeholder {
    flex: 1.6;
    border-right: 0.1rem solid #ccc;
  }
  .components {
    flex: 6;
    .component-list {
      .card-content {
        .tabs {
          .tab-content {
            padding: 16px 23px;
          }
        }

        pre {
          border-bottom: 1px solid #ccc;
        }

        .copy-code {
          width: 150px;
          align-self: end;
        }
        .table-footer {
          text-align: right;
          padding: 8px 0;
          .input {
            color: $aeap-color-primary;
            font-weight: bold;
          }

        }
        table {
          th {
            text-align: center;
          }
          td {
            font-size: 1.6rem;
            padding: 5px 16px 5px 0;

            &.required {
              color: $aeap-color-primary;
            }
          }

          tr:nth-child(odd) {
            background-color: $aeap-color-lighter-grey;
          }
          tr.header {
            background-color: $aeap-color-primary;
            color: $aeap-color-white;
            th {
              padding: 5px;
            }
          }
          .code-text {
            ::ng-deep {
              .ngx-json-viewer {
                padding-left: 24px;
                section.segment-main {
                  white-space: normal;
                }
              }
            }

          }
          &.pagination-table {
            td {
              text-align: center;
            }
          }
        }
        .toast-btn-container {
          button.btn.btn-primary {
            margin-right: 20px;
          }
        }
        .toolbar-primary {
          aeap-primary-toolbar ::ng-deep {
            .analysis-tabs {
              margin: 0;
            }
          }
        }
        .hierarchical-dropdown {
          background: $aeap-bg-light-grey;
        }
      }
      .component-label {
        font-size: 1.8rem;
        align-self: center;
        margin-right: 10px;
      }
      .status {
        color: $aeap-color-white;
        background: $aeap-color-green;
        border-radius: 9px;
        padding: 6px;

        &.prod-ready {
          background-color: $aeap-color-green;
        }
      }
      .tabs-container {
        button {
          margin-right: 5px;
          &:last-child {
            margin-right: 0;
          }
        }
        .no-button {
          border: none;
          background: transparent;
          padding: 0.701rem 3.2rem;
          pointer-events: none;
          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}