.foot {
  align-items: center;
  display: flex;
  color: palette(gray, dark);
  font: {
    weight: 500;
    size: .85rem;
  }
  justify-content: space-between;

  &__right {
  	display: flex;
    align-items: flex-start;
  }
  transition: color $transition;
}

.dark .foot {
  color: palette(dark, x-light);
}

.main-actions, .share-note, .user-profile {
  flex: 1;
  display: flex;
  justify-content: space-between;

  &__right {
    display: flex;
  }
}

.main-actions {
  align-items: center;
}

.share-note {
  align-items: flex-start;
  
  &__container {
    display: flex;
    flex-direction: column;
  }

  &__copy {
    display: flex;
    margin: {
      bottom: .35rem;
    }
  }
  
  &__url {
    cursor: default;
    width: 275px;
    text-overflow: ellipsis;
    color: palette(black);
    font: {
      size: .8rem;
      family: $sans-serif;
    }
    background-color: palette(white);
    border: {
      width: 1px;
      style: solid;
      color: palette(gray, light);
      right-width: 0;
      top-left-radius: $border-radius;
      bottom-left-radius: $border-radius;
      top-right-radius: 0;
      bottom-right-radius: 0;
    }
    padding: {
      top: 3px;
      left: 6px;
      right: 6px;
      bottom: 3px;
    }
    -webkit-appearance: none;

    &:focus {
      outline: 0;
    }

    @media screen and (max-width: $sm) {
      width: 185px;
    }
  }

  .dark &__url {
    color: palette(white);
    border-color: palette(dark, light);
    background-color: palette(dark);
  }

  &__link {
    color: palette(orange);
  }

  .dark &__link {
    color: palette(blue);
  }

  &__button {
    cursor: pointer;
    background-color: palette(orange);
    color: palette(white);
    cursor: pointer;
    border: {
      width: 1px;
      style: solid;
      color: palette(orange, dark);
      top-right-radius: $border-radius;
      bottom-right-radius: $border-radius;
    }
    font: {
      size: .85rem;
      weight: 500;
      family: $sans-serif;
    }

    padding: {
      top: 3px;
      left: 6px;
      right: 6px;
      bottom: 3px;
    }

    &:focus {
      outline: 0;
    }
  }

  .dark &__button {
    background-color: palette(blue);
    border: {
      color: palette(blue, dark);
    }
  }

  &__permission {
    display: flex;
    align-items: center;
  }

  &__checkbox {
    cursor: pointer;
    background-color: transparent;
    border: {
      style: solid;
      width: 1px;
      radius: $border-radius;
    }
    margin: {
      right: .25rem;
    }
    font: {
      weight: 500;
      family: $sans-serif;
    }
    height: 23px;
    width: 27px;
    padding: 0;
    transition: border-color $transition, color $transition;

    &:focus {
      outline: 0;
    }

    &.on {
      color: palette(green);
      border: {
        color: palette(green);
      }
    }

    &.off {
      color: palette(red);
      border: {
        color: palette(red);
      }
    }
  }

  &__info {
    font: {
      size: .8rem;
      weight: 500;
    }
  }
}
