@import url("../../../utils/palette_v2-xqjh14X.css");

[data-template="Common/Form/EditableFormField.html.twig"] {
  .viewing,
  .editing,
  .viewing-checkbox,
  .editing-checkbox {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }

  .viewing-checkbox,
  .editing-checkbox {
    flex-direction: row;
    gap: 1rem;
  }

  .viewing {
    button {
      &:not(.square) {
        flex: 1;
        padding: .75rem 1rem;
        justify-content: space-between;
      }

      &.square {
        height: 2.5rem;
        width: 2.5rem;
        justify-content: center;
      }

      display: flex;
      align-items: center;
      background-color: #FFFFFF;
      border: 1px solid rgb(209, 213, 219);
      border-radius: .5rem;
      box-sizing: border-box;
      cursor: pointer;
      line-height: 1.25rem;
      text-align: center;
      text-decoration: none #D1D5DB solid;
      text-decoration-thickness: auto;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      min-height: 2.5rem;

      &:hover {
        background-color: rgb(249, 250, 251);
      }

      &:focus {
        box-shadow: none;
      }

      &:focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
      }

      span, p {
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        text-align: left;
      }

      svg {
        color: var(--palette_v2-blue_5);
      }
    }
  }

  .editing {

  }

  label, .form-check {
    display: flex;
    align-items: center;
    margin: 0;
  }
}