@import 'themes/default';

.Container {
  background-color: var(--Container____bg-color);
  border: var(--Container____border);
  border-radius: var(--Container____radius);
  box-shadow: var(--Container--uneditable____shadow);
  outline: solid var(--Container____outline-width)
    var(--Container____outline-color);
  outline-offset: calc(-1 * var(--Container____outline-width));
  transition: border var(--timing--fade), box-shadow var(--timing--hover),
    margin var(--timing--fade), opacity var(--timing--fade),
    outline var(--timing--fade);

  &--editing {
    border: var(--Container--editing____border);
    box-shadow: var(--Container--editing____shadow);
  }

  &--editable {
    border: var(--Container--editable____border);
    box-shadow: var(--Container--editable____shadow);

    &:focus-visible,
    &:hover {
      border: var(--Container--editable--hover____border);
      box-shadow: var(--Container--editable--hover____shadow);
    }
  }

  /**
   * Focus outlines are rendered in a `::before` pseudo-element so that they
   * don't interfere with outline styles applied by the `outlineColor` prop.
   */
  &:focus-visible {
    position: relative;

    &::before {
      content: '';
      pointer-events: none;
      border-radius: var(--Container____radius);
      height: 100%;
      left: 0;
      outline: var(--focus--style) var(--focus--color) var(--focus--width);
      outline-offset: var(--focus--width);
      position: absolute;
      top: 0;
      transition: color var(--timing--fade);
      width: 100%;
    }
  }

  // This ensures that the container radius variable is still applied and accessible for consuming components
  &.rounded--tiny {
    --Container____radius: var(--radius--tiny);
  }
  &.rounded--small {
    --Container____radius: var(--radius--small);
  }
  &.rounded--med {
    --Container____radius: var(--radius--med);
  }
  &.rounded--large {
    --Container____radius: var(--radius--large);
  }
  & .rounded--extra-large {
    --Container____radius: var(--radius--extra-large);
  }
  &.rounded--huge {
    --Container____radius: var(--radius--huge);
  }
  &.rounded--pill {
    --Container____radius: var(--radius--pill);
  }
}

.Container__Header {
  border-bottom: solid 1px var(--color--none);
  margin-bottom: 0;
  opacity: 1;
  padding: 2em 2em 0;
  transition-delay: 0s;
  transition-duration: 0s, var(--timing--hover), var(--timing--hover);
  transition-property: border, opacity, padding;
}

.Container__Header--editing {
  border-bottom: solid 1px var(--color--gray-4);
  padding-bottom: 2em;
  transition-delay: var(--timing--hover), 0s, 0s;
  transition-duration: var(--timing--hover);
}