@borderRadius: 4px;

.BaseEnvironment {
  width: 100%;
  border: 1px solid var(--color-cirrus);
  border-radius: @borderRadius;
  background-color: var(--color-white);

  .EnvironmentTitle {
    position: relative;
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--m-spacing) var(--base-horizontal-padding);
    color: var(--color-white);
    background-color: var(--color-primary-g1);
    border-radius: @borderRadius @borderRadius 0 0;

    .env-link {
      color: inherit;
      text-decoration: none;

      .env-name:hover {
        text-decoration: underline;
      }

      i {
        font-size: 12px;
      }
    }

    .env-name {
      &:not(.preview-env) {
        text-transform: uppercase;
      }
      font-size: 20px;
      font-weight: 700;
    }

    .env-deleting {
      position: absolute;
      right: 8px;
      font-size: 13px;
      color: var(--color-white);
      animation: deletingAnimation 2s infinite;
      padding: var(~'--3xs-spacing') var(~'--xs-spacing');
      border-radius: 3px;
      top: 50%;
      transform: translateY(-50%);
    }

    &.small {
      padding: var(--s-spacing) var(--base-horizontal-padding);

      .env-name {
        font-size: 15px;
      }
    }
  }
}