@use '../../styles/typography';

$toolbar-height: 30px;

:host {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;

  .main-toolbar {
    border-bottom: 1px solid var(--color-separator);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-inline: 0.1rem;
    box-sizing: border-box;

    .toolbar-btn {
      color: var(--secondary-contrast);
      padding-inline: 0.375rem;
      cursor: pointer;

      mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
      }
    }

    .tools {
      display: flex;

      .inspect-btn {
        $size: 20px;
        height: $size;
        padding-right: 0;

        svg {
          width: $size;
          height: $size;
          fill-rule: evenodd;
          clip-rule: evenodd;
          stroke-linejoin: round;
          stroke-miterlimit: 2;

          path {
            fill-rule: nonzero;
            fill: var(--secondary-contrast);
          }

          &.inspect-active {
            path {
              fill: var(--dynamic-blue-02);
            }
          }
        }
      }
    }

    .frame-selector {
      width: 100px;
      margin: 0 0.5rem;
    }

    .tab-link {
      @extend %body-medium-01;
      min-width: unset;
      padding: 0 0.625rem;
      height: $toolbar-height;
    }

    .settings {
      flex: 1;
      display: flex;
      justify-content: end;
      align-items: center;
      height: 22px;

      .ver-ruler {
        margin-inline: 0.125rem;
        height: 80%;
      }
    }
  }

  .tab-content {
    position: relative;
    height: calc(100% - #{$toolbar-height + 1px});
  }
}

.menu-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.version-label {
  cursor: default;
}