/* Variables
radius
bg-frame-header.
bg-frame-content. 
border-width
border-frame-header
border-frame-content
border-color

dot-size
dot-gap
dot-color
dot-1-color
dot-2-color
dot-3-color */

@utility browserframe {
  .frame-header {
    display: flex;
    flex-flow: row;
    align-items: center;
    border: var(--border-width, 1px) solid
      var(--border-frame-header, var(--border-color));
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--bg-frame-header);
  }

  .frame-dots {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--dot-gap, 0.5rem);
    padding: var(--dot-padding, 0.75rem 1rem);
  }

  .frame-dot {
    width: var(--dot-size, 0.7rem);
    height: var(--dot-size, 0.7rem);

    circle {
      fill: var(--dot-color, #424242);
    }
  }

  .frame-tabs {
    overflow: hidden;
    align-self: end;
    padding-top: 0.5rem;

    .tablist {
      gap: 0.25lh;
      padding-inline: calc(var(--outline-width) * 2);
    }
  }

  .frame-content {
    border: var(--border-width, 1px) solid
      var(--border-frame-content, var(--border-color));
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--bg-frame-content);

    > :where(*) {
      border-radius: inherit;
    }

    > :where(.background) svg {
      width: 100%;
      height: 100%;
    }
  }
}

@utility browserframe-colored {
  .frame-dot {
    &:first-child {
      --dot-color: var(--dot-1-color, #e2544d);
    }

    &:nth-child(2) {
      --dot-color: var(--dot-2-color, #d79f27);
    }

    &:last-child {
      --dot-color: var(--dot-3-color, #22a936);
    }
  }
}