@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  position: relative;
  width: 100%;
}

.title {
  display: flex;
  padding: 12px;
  border-radius: $border-radius;
  border: solid 1px $border-color;
  background-color: $white;
  cursor: pointer;

  & > div {
    min-width: 120px;
    margin-right: 60px;

    &:first-of-type {
      min-width: 240px;
    }
  }

  &.isOpen {
    margin: 0 -6px;
    padding: 12px 16px;
    background-color: $text-color;
    border-color: $text-color;
    z-index: 1;

    & > div > div {
      & > div,
      & > p {
        color: $white !important;
      }
    }

    :global {
      .kubed-icon-dark {
        color: hsla(0, 0%, 100%, 0.9);
        fill: hsla(0, 0%, 100%, 0.4);
      }
    }
  }
}

.content {
  position: absolute;
  width: 100%;
  padding: 12px;
  border-radius: 0 0 $border-radius $border-radius;
  box-shadow: 0 4px 8px 0 rgba(121, 135, 156, 0.2);
  border: solid 1px $dark-color01;
  border-top-color: $text-color;
  background-color: $white;
  opacity: 0;
  z-index: -1;

  &.visible {
    position: relative;
    opacity: 1;
    z-index: 0;
  }
}

.logs {
  height: 400px;
  padding: 12px;
  border-radius: $border-radius;
  background-color: $dark-color07;
  font-family: 'Monaco', sans-serif;
  line-height: 2;
  color: $light-color02;
  overflow: auto;
}
